webpack4 splitChunksPlugin && runtimeChunkPlugin 配置雜記

fe_bean發表於2018-04-09
WebPlugin

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 **********************************

相關文章