详解用webpack的CommonsChunkPlugin提取公共代码的3种方式，注意webpack4.0版本已不存在

varHtmlWebpackPlugin = require('html-webpack-plugin');

varwebpack = require('webpack');

varextractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

// entry是入口文件，可以多个，代表要编译那些js

//entry:['./src/main.js','./src/login.js','./src/reg.js'],

entry:

{

'main':'./src/main.js',

'user':['./src/login.js','./src/reg.js'],

'index':['./src/index.js']

},

externals:{

'jquery':'jQuery'

},

module:{

loaders:[

// {test:/\.css$/,loader:'style-loader!css-loader'},

{test:/\.css$/,loader:extractTextPlugin.extract('style','css')}

],

},

output:{

path: __dirname+'/build/js',// 输出到那个目录下（__dirname当前项目目录）

filename:'[name].js'//最终打包生产的文件名

},

plugins:[

newHtmlWebpackPlugin({

filename: __dirname+'/build/html/login-build.html',

template:__dirname+'/src/tpl/login.html',

inject:'body',

hash:true,

chunks:['main','user','common.js']// 这个模板对应上面那个节点

}),

newHtmlWebpackPlugin({

filename: __dirname+'/build/html/index-build.html',

template:__dirname+'/src/tpl/index.html',

inject:'body',

hash:true,

chunks:['index','common.js']// 这个模板对应上面那个节点

}),

// css抽取

newextractTextPlugin("[name].css"),

// 提供公共代码

newwebpack.optimize.CommonsChunkPlugin('common.js'),// 默认会把所有入口节点的公共代码提取出来,生成一个common.js

]

};

// 提供公共代码

// 默认会把所有入口节点的公共代码提取出来,生成一个common.js

// 只提取main节点和index节点

newwebpack.optimize.CommonsChunkPlugin('common.js',['main','index']),

newwebpack.optimize.CommonsChunkPlugin({

name:'common',// 注意不要.js后缀

chunks:['main','user','index']

}),