Webpack配置详解
Webpack相关文章
- Webpack的基本使用
- Webpack的性能优化
entry
1.string类型
- 单入口
- 打包形成一个chunk
- 输出一个bundle文件。此时chunk的默认名称是main
module.exports = {
entry: './src/index.js',
...
}
2.array类型
- 多入口
- 所有入口文件最终只会形成-一个chunk,输出出去只有一个bundle文件
- 只有在HMR功能中让html热更新生效
module.exports = {
entry: ['./src/index.js', './src/add.js'],
...
}
3.object类型
- 多入口
- 有几个入口文件就形成几个chunk，输出几个bundle文件
- 此时chunk的名称是key
module.exports = {
entry: {
index: './src/index.js',
add: './src/add.js'
},
...
}
4.特殊用法
module.exports = {
entry: {
//所有入口文件最终只会形成一个chunk,输出出去只有一个bundle文件
index: ['./src/index.js', './src/count.js'],
//形成一个chunk，输出一个bundle文件。
add: './src/add.js'
},
...
}
output
module.exports = {
...
output:{
// 文件名称 (指定名称+目录)
filename: ' js/[name].js',
//输出文件目录(将来所有资源输出的公共目录)
path: resolve(__dirname, 'build'),
//所有资源引入公共路径前缀(比如html中引入js)--> 'imgs/a.jpg' --> '/imgs/a.jpg'
publicPath: '/',
chunkFilename: '[name]_chunk.js', //非入口chunk的名称 比如通过import语法引入的文件
// libraryTarget: 'window' //变量名添加到哪个上 browser
// libraryTarget: 'global' //变量名添加到哪个上 node
libraryTarget: 'commonjs'
}
...
}
module
module.exports = {
...
module: {
rules: [
{
test: /\.css$/
user: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
// 排除node_modules下的js文件
exclude: /node_module/,
// 只检查src下的js文件
include: resolve(__dirname, 'src'),
//优先执行
enforce: 'pre',
//延后执行
// enforce: post
// 单个loader用loader
loader: 'eslint-loader',
options: {
}
},
{
// 以下配置只会生效一个
oneOf: []
}
]
}
}
resolve
module.exports = {
...
// 解析模块的规则
resolve: {
// 配置解析模块路径别名
// 优点:简写路径缺点路径没有提示
alias:{
$css: resolve(__dirname, 'src/css')
},
// 配置省略文件路径的后缀名
extensions: ['.js', '.json', '.jsx'],
// 告诉webpack解析模块是去找哪个目录
modules: [reslove(__dirname, '../../node_modules'), 'node_modules']
}
}
devServer
module.exports = {
...
devServer: {
// 运行代码的目录
contentBase: resolve (__dirname, 'build'),
// 监视contentBase 目录下的所有文件，一旦文件变化就会reload,重新打包
watchContentBase: true,
watchOptions:{
//忽略文件
ignored: / node_ modules/
},
// 启用gzip压缩
compress: true,
port: 5000,
host: 'localhost',
// 自动打开浏览器
open: 'true',
// 开启HMR功能
hot: true,
// 不要显示启动服务器日志信息
clientLogLevel: 'none',
// 除了一些基本启动信息以外，其他内容都不要显示
quiet: true,
// 如果出错了，不要全屏提示
overlay: false,
// 服务器代理--> 解决开发环境跨域问题
proxy: {
// 一旦devServer(5000)服务器接受到/api/xxx 的请求，就会把请求转发到另外一个服务器(3000).
'/api':{
target: 'http://localhost:3000',
//发送请求时，请求路径重写:将/api/xxx --> /xxx (去掉/api)
pathRewrite:{
'^/api': ''
}
}
}
}
optimization
const TerserWebpackPlugin = require('terser -webpack-plugin' )
module.exports = {
...
mode: 'production',
optimization: {
splitChunks: {
chunks: 'all',
//以下为默认值
/*
minSize: 30 * 1024, // 分割的chunk最小为30kb
maxSize: 0, // 最大没有限制
minChunks: 1, // 要提取的chunk至少被引用一次
maxAsyncRequest: 5, //按需如载时并行加载的文件的最大数量
maxInitialRequest: 3, //入口js.文件最大并行请求数量
automaticNameDelimiter: '~', // 名称连接符
name : true, //可以使用命名规则
cacheGroups: { // 分割chunk的组
// node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
//满足上面的公共规则，如:大小超过30kb， 至少被引用一次。
vendors:{
test: /[\\/ ]node_ modules[\\/]/,
// 打包优先级为-10
priority: -10
},
default: {
//要提取的chunk最少被引用2次
minChunks: 2,
//优先级
priority: -20,
//如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
reuseExistingChunk: true
}
}
*/
},
// 将当前模块的记录其他模块的hash单独打包为一一个文件runtime
// 解决: 修改a文件导致b文件的contenthash变化，并且发生重新打包的现象
runtimeChunk: {
name: entrypoint => `runtime-${
entrypoint.name}`
}，
minimizer:[
//配置生产环境的压缩方案: js和css
new TerserWebpackPlugin({
//开启缓存
cache: true,
//开启多进程打包
parallel: true,
//启动source-map
sourceMap: true
})
]
}