当前位置: 首页 > news >正文

关于webpack的基本配置

文章目录

  • 前言
  • 一、webpack基本配置
    • 1.配置拆分和merge
    • 2. 启动服务
    • 3、处理es6,配置babel
    • 4、处理样式
    • 5、处理图片


前言

为什么要有webpack构建和打包?

  • 更好的模块化管理。webpack支持模块化规范:代码分割成独立模块,并管理模块之间的依赖关系。
  • 资源打包。将js文件、css文件、图片等多个资源打包成单个或多个文件,减少请求,提高加载性能性能,且webpack支持资源压缩、优化、缓存等处理。
  • 转换和编译。如用Bable将ES6+代码转为向后兼容版本如ES5,将sass、less、stylus转为浏览器能识别的css代码,将ts转为js等。
  • 代码拆分和懒加载。当应用程序变得复杂时,打包文件体积也会变大,导致初始加载时间太长。因此可以对代码进行拆分,按需加载。
  • 插件系统和扩展性。Webpack具有强大的插件系统,提供了许多插件和工具,以满足不同项目的需求。

一、webpack基本配置

1.配置拆分和merge

mode表示以什么模式打包;
使用development模式,打包后的代码可阅读,没被压缩;
使用production模式,代码会被压缩。

const path = require('path');
module.exports = {mode:'development', // production 生产环境entry:{app: './src/main.js',list: './src/main.js'},output:{path.resolve(__dirname, 'dist');filename: '[name].js'}
}

开发环境和生产环境是不一样的,为了解决手动改更改mode带来的不便,所以将这些打包配置拆分到不同文件中:

  • 通用配置:webpack.common.js
  • dev配置: webpack.dev.js
  • prod配置:webpack.prod.js
// webpack.common.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__dirname,'..'.'dist')
module.exports={entry:{path:path.join(srcPath,'index')}
}

由于我们拆分了配置,公共的一些配置项不需要在dev和prod里面再去重新写,所以我们需要把webpack.common.js分别和dev,prod建立连接。
这时需要安装webpack-merge这个插件

npm i webpack-merge -D

安装完成后需要在dev和prod里面分别引入:

// webpack.dev.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')module.exports=merge(webpackCommonConf,{ // 合并mode:'development'
})
// webpack.prod.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')module.exports=merge(webpackCommonConf,{ // 合并mode:'production'output:{filename:'bundle.[contentHash:8].js',path:path.join(distPath)}
})

然后修改package.json中的build命令:

"scripts":{"build":"webpack --config build/webpack.prod.js","devBuild": "webpack --config build/webpack.dev.js",}

生产模式打包:npm run build
开发模式打包:npm run devBuild

2. 启动服务

1)

// webpack.common.js
//首先使用 npm i html-webpack-plugin -D 安装 html-webpack-plugin
// 然后配置入口文件,启动服务后会打包生成html文件
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={plugins:[new HtmlWebpackPlugin({template:path.join(srcPath,'index.html'),filename:'index.html'//打完包以后的文件名称chunks:["index"] //这里的chunks代表的意思是引入的是哪一个入口文件,我引入的就是src下建立的index.js文件})]
}

2)安装 npm i webpack-dev-server -D

// webpack.dev.js 版本4.x
module.exports=merge(webpackCommonConf,{devServer:{port:3000,static:distPath,//根目录open:true,//自动打开浏览器compress:true,//启动压缩//如果需要跨域请求接口proxy:{'/api':{target:'http://localhost:3000'}}}
})
  1. 配置dev命令,在package.json文件中
"script":{"dev":"webpack-dev-server --config build/webpack.dev.js"
}

npm run dev启动服务。

3、处理es6,配置babel

对于现代浏览器而言,有些ES6语法是无法被解析的,因此需要babel将ES6解析ES5,这也解决了浏览器兼容性问题。
1)首先安装babel-loader:

npm i babel-loader -D //我这里是^8.0.6版本的
npm i babel-core -D//babel-core包含了一些babel里面的api
npm i babel-preset-env -D //提供执行环境

2)在根目录新建.babelrc文件

{"presets": ["babel-preset-env"],"plugins": []
}

3)在webpack.common.js中配置babel

module.exports = {
// ...module:{rules:[{test:/\.js$/,loader:['babel-loader'],include:srcPath,exclude:/node_modules/}]}
// ...
}

4、处理样式

一般也是在webpack.common.js中配置,无论在开发模式还是生产模式都需要处理样式。

1)对于css文件
安装:

npm i css-loader -D
npm i style-loader -D

配置如下:

module:{rules:[{test:/\.css$/,loader:['style-loader','css-loader']//执行顺序为从后到前}]
}

2)对于less等预处理器
安装:

npm i less -D
npm i less-loader -D

配置:

module:{rules:[{test:/\.less/,loader:['style-loader','css-loader','less-loader']}]
}

3)postcss-loader可以做兼容浏览器,有些css语法不是所有浏览器都兼容,postcss-loader就可以帮我们做这些事情。
postcss-loader是一个比较大的插件,里面可以再引入一些别的功能,如autoprefixer:

安装 : npm install postcss autoprefixer

在公共配置文件中配置postcss:

{test: /\.css$/,// loader 的执行顺序是:从后往前loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},

配置autoprefixer,新建postcss.config.js,配置如下代码:

module.exports = {plugins: [require('autoprefixer')]
}

autoprefixer是一个后处理程序,而可以同sass、stylus或less等预处理器共同使用。它适用于普通的css,无需关心你要为哪些浏览器加前缀,只需关注于实现,并使用w3c最新规范。一般配合postcss一起使用

5、处理图片

对于图片的处理一般分为dev和prod环境下的处理,主要原因是图片一般是在根目录下,打包以后希望全部输出到img文件夹里面,而且需要对图片的大小做一些精细化的配置处理。

对图片的使用有这三种:

  • 在html中的src标签中使用
  • 在js中import中使用
  • 在css中使用,比如背景图片

对于第一种,需要安装html-withimg-loader:

npm i html-withimg-loader -D //^0.1.16
module:{rules:[{test:/\.html$/use:'html-withimg-loader'}]
}

对于第二种和第三种情况:安装file-loader

npm i file-loader -D
module:{rules:[{test:/\.(jpg|png|gif)$/,use:'file-loader'}]
}

webpack.prod.js,在这个文件里对图片做一些精细化配置,需要安装url-loader:

npm i url-loader -D
module:{rules:[{test:/\.(png|jpg|gif)$/,use:{loader:'url-loader',options:{limit:1024*5,//小于5kb的图片会被输出为base64格式outputPath:"/img/" //全部输出到img文件夹里面}}}]
}

相关文章:

关于webpack的基本配置

文章目录 前言一、webpack基本配置1.配置拆分和merge2. 启动服务3、处理es6,配置babel4、处理样式5、处理图片 前言 为什么要有webpack构建和打包? 更好的模块化管理。webpack支持模块化规范:代码分割成独立模块,并管理模块之间…...

SpringBoot WebSocket配合react 使用消息通信

引入websocket依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>配置websocket import org.springframework.context.annotation.Bean; import org.spr…...

【积水成渊】uniapp高级玩法分享

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人_python人工智能视觉&#xff08;opencv&#xff09;从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了&#xff1a; https://blog.csdn.net/lbcy…...

在指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配

1.Cadence 17.2 配置CIS数据库报&#xff1a;ERROR(ORCIS-6245): Database Operation Failed 安装cadance17.2以上版本时&#xff0c;ERROR(ORCIS-6245): Database Operation Failed_收湾湾的博客-CSDN博客 原因是ODBC数据库没有配置&#xff0c;或者没有驱动&#xff0c; 驱…...

API接口 |产品经理一定要懂的技术知识

什么是接口❓ 要理解接口是什么&#xff0c;首先理解一下为什么要用接口&#xff1f; 两个独立的系统&#xff0c;它们的数据或程序是独立的&#xff0c;这就使得它们无法直接访问对方的数据库或程序&#xff08;两个独立的数据相当于两个独立的家庭&#xff0c;每个家庭肯定是…...

C++中访问存储在数组中的数据

C中访问存储在数组中的数据 要访问数组中的元素&#xff0c;可使用从零开始的索引。这些索引之所以被称为从零开始的&#xff0c;是因为数组中第一个元素的索引为零。因此&#xff0c;存储在数组 myNumbers 中的第一个整数值为 myNumbers[0]&#xff0c;第二个为 myNumbers[1]…...

【创建型设计模式】C#设计模式之原型模式

原型模式是一种创建型设计模式&#xff0c;它通过复制现有对象来创建新对象&#xff0c;而无需通过实例化的方式。它允许我们使用已经存在的对象作为蓝本&#xff0c;从而创建新的对象&#xff0c;这样可以避免重复初始化相似的对象&#xff0c;提高了对象的创建效率。 现在给…...

用C语言高效地打印杨辉三角

假设杨辉三角的通项公式为a(n)&#xff0c;则打印形式如下&#xff1a; 然而我们知道&#xff0c;它应该是这样的&#xff1a; 三角形两边的值都为1&#xff0c;且每个元素的值都为该元素正上方和其正上方前面的元素的值之和。 为了实现这个代码&#xff0c;我们需要知道每行首…...

TCP/IP四层模型对比OSI七层网络模型的区别是啥?数据传输过程原来是这样的

一、TCP/IP四层模型对比OSI七层模型 它们两个定义的一些功能和协议都是差不多的。TCP/IP四层协议模型比我们的七层少了三层&#xff0c;把我们的数据链路层和物理层放在一层里面了&#xff0c;叫做数据链路层&#xff08;网络接口层&#xff09;&#xff0c;对应网络协议也没有…...

接口测试实战,Jmeter正则提取响应数据-详细整理,一篇打通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 在测试时&#xf…...

基于自适应变异粒子群优化BP神经网络 的风速预测,基于IPSO-BP神经网络里的风速预测

目录 摘要 BP神经网络的原理 BP神经网络的定义 BP神经网络的基本结构 BP神经网络的神经元 BP神经网络的激活函数, BP神经网络的传递函数 粒子群算法的原理及步骤 基于自适应变异粒子群算法改进优化BP神经网络的风速预测 完整代码下载:https://download.csdn.net/download/ab…...

MySQL—日志

这里写目录标题 undo logundo log的作用undo log页记录的是什么 Buffer Pool为什么需要Buffer PoolBuffer Pool缓存什么 redo log什么是redo logredo log的作用redo log什么时候刷盘undo和redo的区别 binlogbinlog 作用redo log和binlog区别如果数据数据被删了&#xff0c;能用…...

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次 问题代码官方说明参考资料 问题代码 直接从官方示例中复制过来改的。为了演示 <template><view><uni-forms ref"form" :modelValue"formData" :rules"rules&qu…...

每日一题8.10 lc39

39. 组合总和 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重…...

贝叶斯深度学习的温和介绍

一、说明 欢迎来到令人兴奋的概率编程世界&#xff01;本文是对这个领域的温和介绍&#xff0c;你只需要对深度学习和贝叶斯统计有一个基本的了解。如果像我一样&#xff0c;你听说过贝叶斯深度学习&#xff0c;并且你猜它涉及贝叶斯统计&#xff0c;但你不知道它是如何使用的&…...

无涯教程-Perl - glob函数

描述 此函数返回与EXPR匹配的文件的列表,这些文件将由标准Bourne shell进行扩展。如果EXPR未指定路径,请使用当前目录。如果省略EXPR,则使用$_的值。 从Perl 5.6开始,扩展是在内部完成的,而不是使用外部脚本。扩展遵循csh(以及任何派生形式,包括tcsh和bash)的扩展方式,其翻译…...

前端先行模拟接口(mock+expres+json)

目录 mock模拟数据&#xff1a;data/static.js 路由&#xff1a;index.js 服务器&#xff1a;server.js yarn /node 启动服务器&#xff1a;yarn start 客户端&#xff1a;修改代理路径(修改设置后都要重启才生效) 示例 后端框架express构建服务器 前端发起请求 静态数…...

老师如何制作学生分班信息查询系统?

即将迎来新学期的开始&#xff01;学校和老师们将忙于为我们可爱的学生做分班准备。如果有一个强大的分班查询系统&#xff0c;学生们就可以提前知道自己被分到哪个班级&#xff0c;有哪些课程&#xff0c;以及班主任是谁&#xff01; 别担心&#xff0c;我将教你如何设计一个…...

Java实战:高效提取PDF文件指定坐标的文本内容

前言 临时接到一个紧急需要处理的事项。业务侧一个同事有几千个PDF文件需要整理&#xff1a;需要从文件中的指定位置获取对应的编号和地址。 要的急&#xff0c;工作量大。所以就问到技术部有没有好的解决方案。 问技术的话就只能写个demo跑下了。 解决办法 1. 研究下PDF文档…...

centos磁盘满了,怎么清理大文件

当CentOS磁盘空间不足时&#xff0c;可以通过以下步骤清理大文件&#xff1a; 确定磁盘使用情况&#xff1a;运行以下命令查看磁盘使用情况和占用空间最大的文件或目录&#xff1a; df -h du -sh /*清理临时文件&#xff1a;运行以下命令清理临时文件夹中的过期数据&#xff…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...