webpack.optimize.CommonsChunkPlugin插件的使用
方式一,传入字符串参数
new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
1 var HtmlWebpackPlugin = require('html-webpack-plugin'); 2 var webpack = require('webpack'); 3 4 var extractTextPlugin = require('extract-text-webpack-plugin'); 5 6 module.exports = { 7 // entry是入口文件,可以多个,代表要编译那些js 8 //entry:['./src/main.js','./src/login.js','./src/reg.js'], 9 10 entry: 11 { 12 'main':'./src/main.js', 13 'user':['./src/login.js','./src/reg.js'], 14 'index':['./src/index.js'] 15 }, 16 17 externals:{ 18 'jquery':'jQuery' 19 }, 20 21 module:{ 22 loaders:[ 23 // {test:/\.css$/,loader:'style-loader!css-loader'}, 24 {test:/\.css$/,loader:extractTextPlugin.extract('style','css')} 25 ], 26 }, 27 28 output:{ 29 path: __dirname+'/build/js', // 输出到那个目录下(__dirname当前项目目录) 30 filename:'[name].js' //最终打包生产的文件名 31 }, 32 33 plugins:[ 34 new HtmlWebpackPlugin({ 35 filename: __dirname+'/build/html/login-build.html', 36 template:__dirname+'/src/tpl/login.html', 37 inject:'body', 38 hash:true, 39 chunks:['main','user','common.js'] // 这个模板对应上面那个节点 40 }), 41 42 new HtmlWebpackPlugin({ 43 filename: __dirname+'/build/html/index-build.html', 44 template:__dirname+'/src/tpl/index.html', 45 inject:'body', 46 hash:true, 47 chunks:['index','common.js'] // 这个模板对应上面那个节点 48 }), 49 50 // css抽取 51 new extractTextPlugin("[name].css"), 52 53 // 提供公共代码 54 new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js 55 ] 56 }
方式二,有选择的提取公共代码
// 提供公共代码 // 默认会把所有入口节点的公共代码提取出来,生成一个common.js // 只提取main节点和index节点 new webpack.optimize.CommonsChunkPlugin('common.js',['main','index']),
方式三,有选择性的提取(对象方式传参) (推荐)
new webpack.optimize.CommonsChunkPlugin({ name:'common', // 注意不要.js后缀 chunks:['main','user','index'] }),
通过CommonsChunkPlugin,我们把公共代码专门抽取到一个common.js,这样业务代码只在index.js,main.js,user.js