webpack.optimize.CommonsChunkPlugin

打包第三方控件；比如jquery，angular，bootstrap。。。。

const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
const PATHS = {
    app: path.join(__dirname, 'src'),
    build: path.join(__dirname, 'build'),
};
module.exports ={
    entry: {
        app: PATHS.app,
        vendor: ['react', 'react-dom', 'react-router', 'classnames']
    },
    output: {
        path: PATHS.build,
        filename: "[name].[chunkHash:8].js",
        publicPath: '',
        chunkFilename: "[name].[chunkHash:8].js",
    },
    plugins: [
        new CommonsChunkPlugin({
            names: ['vendor', 'manifest']//manifest:抽取变动部分，防止第三方控件的多次打包

　　　　　})
　　]
 }

总结：

1，vendor则是通过提取公共模块插件来提取的代码块（webpack本身带的模块化代码部分），而manifest则是在vendor的基础上，再抽取出要经常变动的部分，比如关于异步加载js模块部分的内容。

2，我们可以加上hash来查看，在未变动的情况下，是否又重新打包；

3，第三方控件只用打包一次就可以了。

转载于:https://www.cnblogs.com/wang715100018066/p/7274695.html