上一篇：当下流行的打包工具Webpack从入门到熟练系统学习教程（四）webpack性能优化
1.entry（入口起点）
这是整个需要打包文件的入口文件；也就是说打包入口是哪里这里有三种常见的写法
1.string写法：
entry: './src/index.js',
单入口 打包形成一个chunk 输出一个bundle文件 这个bundle默认是main
2.array写法：
entry: ['./src/index.js', './src/add.js'],
多入口 所有文件最终只会有一个chunk 输出只有一个bundle文件
3.object写法：
entry: {
index: './src/index.js',
add: './src/add.js'
},
有几个入口文件最终就会形成几个chunk 输出几个bundle文件 此时chunk名为key
2.output（输出）
文件名称 （指定名称+目录）
filename: '[name].js',
输出文件目录 （将来所有资源输出的公共目录）
path: resolve(__dirname, 'build'),
将所有资源引入公共路径前缀
publicPath: '/',
非入口chunk的名称
chunkFilename: 'js/[name]_chunk.js',
向整个库向外暴露的变量名
library: '[name]',
变量名添加到browser
libraryTarget: 'window',
变量名添加到node
libraryTarget: 'global',
示例：
output: {
// 文件名称 （指定名称+目录）
filename: '[name].js',
// 输出文件目录 （将来所有资源输出的公共目录）
path: resolve(__dirname, 'build'),
// 将所有资源引入公共路径前缀
publicPath: '/',
// 非入口chunk的名称
chunkFilename: 'js/[name]_chunk.js',
// 向整个库向外暴露的变量名
library: '[name]',
// 变量名添加到哪个browser
libraryTarget: 'window',
// 变量名添加到哪个node
libraryTarget: 'global',
},
3.module
module.generator（可以使用 module.generator 在一个地方配置所有生成器的选项）
module.exports = {
module: {
generator: {
asset: {
// asseet 模块的 generator 选项
// 自定义 asset 模块的 publicPath，自 webpack 5.28.0 起可用
publicPath: 'assets/',
// 将静态资源输出到相对于 'output.path' 的指定文件夹中，webpack 5.67.0 后可用
outputPath: 'cdn-assets/',
},
'asset/inline': {
// asset/内联模块的 generator 选项
},
'asset/resource': {
// asset/资源模块的 generator 选项
// 自定义 asset/resource 模块的 publicPath，自 webpack 5.28.0 起可用
publicPath: 'assets/',
// 将静态资源输出到相对于 'output.path' 的指定文件夹中，webpack 5.67.0 后可用
outputPath: 'cdn-assets/',
},
javascript: {
// 该模块类型尚不支持 generator 选项
},
'javascript/auto': {
// 同上
},
'javascript/dynamic': {
// 同上
},
'javascript/esm': {
// 同上
},
// 其他...
},
},
};
module.rules（创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。 这些规则能够对模块(module)应用 loader，或者修改解析器(parser)）
module: {
rules: [
// loader的配置
{
test: /\.css$/,
// 多个loader用use
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
// 排除node-modules下的文件
exclude: /node_modules/,
// 检查src下的js文件
include: resolve(__dirname, 'src'),
// 优先执行
enforce: 'pre',
// 延后执行
enforce: 'post',
// 单个loader用loader
loader: 'eslint-loader',
// 具体配置属性
options: {
}
},
// 以下配置值会生效一个
{
oneOf: []
}
]
},
4.resolve（解析模块的规则）
这些选项能设置模块如何被解析。webpack 提供合理的默认值，但是还是可能会修改一些解析的细节
resolve: {
// 配置解析模块路径别名：优点是简写路径 缺点是路径没有提示
alias: {
$css: resolve(__dirname, 'src/css'),
},
// 配置省略文件路径的后缀名
extensions: ['.js', '.json', '.jsx', '.css'],
// 告诉webpack 解析模块的时候应该去找哪个目录
modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
},
5.devServer（开发服务器）
devServer: {
// 运行代码的目录
contentBase: resolve(__dirname, 'build'),
// 监视目录下的所有文件 只要发生变化就会重载 reload
watchContentBase: true,
// 启动gzip压缩
compress: true,
watchOptions: {
// 忽略文件
ignored: /node_modules/
},
// 端口号
port: 8080,
// 域名
host: 'localhost',
// 自动打开浏览器
open: true,
// 开启HMR功能
hot: true,
// 不要显示启动服务器日志信息
clientLogLevel: 'none',
// 除了基本启动信息外 其他内容不显示
quiet: true,
// 出错不要全屏提示
overlay: false,
// 服务器代理 解决开发环境跨域问题
proxy: {
// 一旦devServer(8080)服务器接收到/api/xxx 的请求 就会把请求转发到另一个服务器
'/api': {
target: 'http://localhost:3000',
// 发送服务器时，请求路径重写
pathRewrite: {
'^/api': ''
}
}
}
},
6.optimization
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30 * 1024, // 分割chunk最小为30kb
maxSize: 0, // 最大没有限制
minChunks: 1, // 要提取的chunk最少被引用1次
maxAsyncRequests: 5, // 按需加载时并行加载文件的最大数量
maxInitialRequests: 3, //入口js文件最大并行请求数量
automaticNameDelimiter: '~', // 名称连接符
name: true,
cacheGroups: {
// node-modules文件会被打包到 vendors组的chunk中 vendors~xxx.js
// 满足上面的公共规则
vendors: {
test: /[\\/]node_modules[\\/]/,
// 优先级为-10
priority: -10
},
default: {
// 要提取的chunk最少被引用2次
minChunks: 2,
// 优先级
priority: -20,
// 如果当前要打包的模块和之前已经被提取的模块是同一个 就会复用 而不是重新打包模块
reuseExistingChunk: true
}
}
},
// 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
runtimeChunk: {
name: entrypoint => `runtime-${
entrypoint.name}`
},
// 配置生产环境的压缩方案 js 和 css
minimizer: [
new TerserWebpackPlugin({
cache: true, // 开启缓存
parallel: true, // 开启多进程打包
sourceMap: true // 启动 source-map
})
]
},