Error：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChu

如果使用中文webpack文檔做代碼分離，會有報錯，報錯詳情是：

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

解決辦法可以參考官方英文文檔：https://webpack.js.org/guides/code-splitting/

具體實現如下：如下optimization配置

module.exports = {
    entry: {
        app: "./src/index.js",
        another: './src/another-module.js'
    },
    plugins: [
        new HtmlWebpackPlugin ({
            title: "code Splitting "
        }),
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve (__dirname, 'dist')
    },
};

 

然後執行npm run build，運行結果如下：

 

 

在這裏生成了一個名字爲 vendors~another.bundle.js的文件，如果不想用這個默認生成的名稱完全可以，自己命名。

給optimization配置一個name屬性

optimization: {
       splitChunks: {
       chunks: 'all',
       name:'common'
   }
},

再次執行npm run build ,會發現生成了一個common.bundle.js，沒問題

 

交流

可添加qq羣共同進階學習： 進軍全棧工程師疑難解  羣號:   856402057

我是老禮，公衆號「進軍全棧攻城獅」作者 ，對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！