webpack代碼分離CommonsChunkPlugin插件的使用（防止重複）

 1.webpack.config.js中添加：

const path = require('path'); + const webpack = require('webpack'); const HTMLWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { index: './src/index.js', another: './src/another-module.js' }, plugins: [ new HTMLWebpackPlugin({ title: 'Code Splitting' - }) + }), + new webpack.optimize.CommonsChunkPlugin({ + name: 'common' // 指定公共 bundle 的名稱。 + }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };

2.而後就遇到了一個問題，還給出了一個解決方案，須要去查看文檔中的插件章節

 

 

//optimization與plugins同級
optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                name: "commons",
                chunks: "initial",
                minChunks: 2
            }
        }
    }
},

 

3.運行npm run build，若是有公共部分可獲得common.bundle.js文件，若是沒有則不會生成這個文件