方式一,传入字符串参数
new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js1 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.js55 ]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