關於webpack.optimize.CommonsChunkPlugin的使用二

Note:當有多個入口節點的時候，只有所有入口節點都引入了同一個模塊的時候，webpack.optimize.CommonsChunkPlugin才會將那個模塊提取出來，如果其中一個入口節點沒有引入該模塊，那么其他引入了該模塊的入口節點都會將該模塊打包到各自的文件中，這樣重復打包造成入口節點文件體積過大。

    entry:{
        main:__dirname + '/app/main.js',
        index:__dirname + '/app/index.js',
        vendor:['./app/vue','./app/jquery-1.8.3.min']
    },
    output:{
        path:__dirname + '/public', //通過HtmlWebpackPlugin插件生成的html文件存放在這個目錄下面
        filename:'/js/[name].js', //編譯生成的js文件存放到根目錄下面的js目錄下面,如果js目錄不存在則自動創建
        /*
         * chunkFilename用來打包require.ensure方法中引入的模塊,如果該方法中沒有引入任何模塊則不會生成任何chunk塊文件
         * 比如在main.js文件中,require.ensure([],function(require){alert(11);}),這樣不會打包塊文件
         * 只有這樣才會打包生成塊文件require.ensure([],function(require){alert(11);require('./greeter')})
         * 或者這樣require.ensure(['./greeter'],function(require){alert(11);})
         * chunk的hash值只有在require.ensure中引入的模塊發生變化,hash值才會改變
         * 注意:對於不是在ensure方法中引入的模塊,此屬性不會生效,只能用CommonsChunkPlugin插件來提取
         * */
        chunkFilename:'js/[chunkhash:8].chunk.js'
    },
    module:{
        loaders:[
            {test:/\.css$/,loader:ExtractTextWebpackPlugin.extract('style-loader','css-loader')}
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({title:'custom title2',template:__dirname + '/public/tempIndex.html'}),
        new ExtractTextWebpackPlugin('/css/index.css'),
        //所有入口js節點中引入的公共模塊和vendor第三方模塊都被打包到vendor.chunk.js文件中了
        //如果output中chunkFilename屬性生效則節點中引入的公共模塊不會打包進來，而是根據chunkFilename的配置另外生成一個chunk.js文件 

　　　　　new webpack.optimize.CommonsChunkPlugin('vendor','js/vendor.chunk.[hash:8].js') ]