var path = require('path')
var webpack = require('webpack')
function getModuleName(module) {
var sign = 'node_modules';
var signIndex = module.resource.indexOf(sign);
var pathSeparator = module.resource.slice(signIndex - 1, signIndex);
var modulePath = module.resource.substring(signIndex + sign.length + 1);
var moduleName = modulePath.substring(0, modulePath.indexOf(pathSeparator) );
moduleName = moduleName.toLowerCase();
return moduleName
}
exports.chunksWebpackConfig = {
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'axios',
chunks: ['vendor'],
minChunks: function (module, count) {
return module.resource && ~['axios', 'qs', 'md5'].indexOf(getModuleName(module) ) && count >= 1
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vue',
chunks: ['vendor'],
minChunks: function (module, count) {
return module.resource && ~['vue', 'vue-router'].indexOf(getModuleName(module) ) && count >= 1
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'element-ui',
chunks: ['vendor'],
minChunks: function (module, count) {
return module.resource && ~['element-ui'].indexOf(getModuleName(module) ) && count >= 1
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'echarts',
chunks: ['vendor'],
minChunks: function (module, count) {
return module.resource && ~['echarts', 'zrender'].indexOf(getModuleName(module) ) && count >= 1
}
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['echarts'],
async: true,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: Infinity,
}),
],
}
var chunks = ['manifest', 'axios', 'vue', 'vendor', 'element-ui', 'echarts', 'app'];
exports.htmlWebpackConfig = {
chunks: chunks,
chunksSortMode: function(a, b) {
return chunks.indexOf(a.names[0]) - chunks.indexOf(b.names[0])
},
}
......
var baseWebpackConfig = require('./webpack.base.conf')
var { chunksWebpackConfig } = require('./webpack.chunks.conf')
module.exports = merge(baseWebpackConfig, chunksWebpackConfig, {
......
})
var { htmlWebpackConfig } = require('./webpack.chunks.conf')
new HtmlWebpackPlugin(Object.assign({}, {
filename: 'index.html',
template: 'index.html',
inject: true,
}, htmlWebpackConfig)),
来源:( https://www.jianshu.com/p/5a543a0284f6 )