webpack4 splitChunksPlugin && runtimeChunkPlugin 配置杂记
webpack2 还没研究好,就发现升级到4了,你咋这么快~
最近要做项目脚手架,项目构建准备重新做,因为之前写的太烂了...然后发现webpack大版本已经升到4了(又去看了一眼,4.5了),这么快的节奏,不适应啊...既然是新的,就用新的来吧,先跳过version3
webpack4 相对于之前的版本,有不少变化,其中包括一些不向下兼容的变化。具体哪些变化这里就不啰嗦了(4.0 changelog, 译文),今天主要记录一下 废除 commonChunksPlugin
之后,怎么使用 splitChunksPlugin
&& runtimeChunkPlugin
只记录到自己了解到的部分,不定期更新吧
splitChunksPlugin
splitChunksPlugin 默认配置项
:
{ "chunks": "all", "minSize": 0, "misChunks": 1, "maxAsyncRequests": 1, "maxInitialRequests": 1, "name": undefined, "automaticNameDelimiter": "~", "filename": undefined, "cacheGroups": {} }
稍微来解释下各项配置:
- chunks: all, async, initial 三选一, 插件作用的chunks范围
- minSize: 最小尺寸
- misChunks:最小chunks
- maxAsyncRequests: 最大异步请求chunks
- maxInitialRequests: 最大初始化chunks
- name: split 的 chunks name
- automaticNameDelimiter: 如果不指定name,自动生成name的分隔符(‘runtime~[name]’)
- filename: ''
- cacheGroups: 字面意思缓存组,主要配置在这里
cacheGroups配置项:
[key]: { "priority": "缓存优先级权重", "name": "split 出来的 chunk 的名字", "chunks": "应该用范围", "enforce": "未知", "minSize": "最小尺寸", "minChunks": "最小chunks", "maxAsyncRequests": "", "maxInitialRequests": "", "filename": "最后output的文件名", "reuseExistingChunk": "未知" }
runtimeChunkPlugin
"runtimeChunk": { "name": "manifest" }
直接上例子了:
用不着的属性就不配置了,需要关联到 output 和 ExtractTextPlugin 配置
webpackConf: { ..., output: { path: path.join(process.cwd(), 'dist'), publicPath, filename: '[name].js', chunkFilename: '[name].js' }, optimization: { splitChunks: { chunks: 'initial', // 只对入口文件处理 cacheGroups: { vendor: { // split `node_modules`目录下被打包的代码到 `page/vendor.js && .css` 没找到可打包文件的话,则没有。css需要依赖 `ExtractTextPlugin` test: /node_modules\//, name: 'page/vendor', priority: 10, enforce: true }, commons: { // split `common`和`components`目录下被打包的代码到`page/commons.js && .css` test: /common\/|components\//, name: 'page/commons', priority: 10, enforce: true } } }, runtimeChunk: { name: 'page/manifest' } }, plugins: [ new ExtractTextPlugin({ filename: '[name].css', ignoreOrder: true }), ... ] ... }
如果没有css文件,说明对应目录下没有相关css资源引用,或者未使用ExtractTextPlugin
dist
└── page
├── [commons.css]
├── commons.js
├── [manifest.css]
├── manifest.js
├── [vendor.css]
├── vendor.js
└── demo // entry 中 配置
├── index.css
└── index.js
```
写在最后
上边的例子是用的 optimization
配置项形式,你也可以用 plugin
形式,配置参数应该一样的。
之前搜索相关的配置,介绍的文章较少,有一些简单的demo,但总觉得不受用。
参考了不少文章,然后又大概读了 webpack
的 splitChunksPlugin
的源码,去了解了下都有哪些参数,看源码挺好
********************************** done **********************************