webpack打包详细说明
webpack代理时自动更新失效
// vue.config.js
module.exports = {
devServer: {
port: 8080,
hotOnly: false,
disableHostCheck: true,
headers: { 'Access-Control-Allow-Origin': '*' },
// 使用whistle代理时自动更新失效报sockjs跨域，使用public参数解决
public: 'www.test.com',
},
};
webpack概念module、chunk和bundle
- module：js的模块化，简单说就是通过import引入的代码
- chunk：webpack根据功能拆分的代码块，包含三种情况
- 项目入口entry
- 通过import()动态引入的代码
- 通过splitChunks拆分出来的代码
- bundle：webpack打包后的各个文件，对chunk编译压缩打包后的产物。
webpack默认配置
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
webpack.splitChunks.chunks
- async表示只从异步加载得模块（动态加载import()）里面进行拆分
- initial表示只从入口模块进行拆分
- all表示以上两者都包括
webpack.splitChunks.cacheGroups
cacheGroups会继承默认配置里面的chunks、minSize、minChunks等等，除了test, priority和reuseExistingChunk，这三个是只在cacheGroup这一层生效。
webpack.splitChunks.maxInitialRequests
限制入口的拆分数量
- 入口文件本身算一个请求
- 如果入口里面有动态加载得模块这个不算在内
- 通过runtimeChunk拆分出的runtime不算在内
- 只算js文件的请求，css不算在内
- 同时有两个模块满足cacheGroup的规则要进行拆分，但是maxInitialRequests的值只能允许再拆分一个模块，那尺寸更大的模块会被拆分出来
webpack.splitChunks.maxAsyncRequests
限制异步模块内部的并行最大请求数，可以理解为是每个import()它里面的最大并行请求数量。
- import()文件本身算一个请求
- 并不算js以外的公共资源请求比如css
- 同时有两个模块满足cacheGroup的规则要进行拆分，但是maxAsyncRequests的值只能允许再拆分一个模块，那尺寸更大的模块会被拆分出来
其它
- cacheGroup必须同时满足各个条件才能生效
- splitChunks的配置项都是作用于cacheGroup上的，如果将cacheGroup的默认两个分组vendor和default设置为false，则splitChunks就不会起作用
- minChunks、maxAsyncRequests、maxInitialRequests的值必须设置为大于等于1的数
- 当chunk没有名字时，通过splitChunks分出的模块的名字用id替代，当然也可以通过name属性自定义
- 当父chunk和子chunk同时引入相同的module时，并不会将其分割出来而是删除掉子chunk里面共同的module，保留父chunk的module，这个是因为 optimization.removeAvaliableModules 默认是true
- 当两个cacheGroup.priority相同时，先定义的会先命中
- 除了js，splitChunks也适用于css
