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,第三方控件只用打包一次就可以了。