},
{
test: /.css$/,
loader: ['style-loader', 'css-loader'] },
{
test: /.styl$/,
loader: ['style-loader', 'css-loader', 'stylus-loader'] }
] },
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
plugins: [
new BundleAnalyzerPlugin(),
new CleanWebpackPlugin(['dist']),
generateHtml,
new webpack.optimize.CommonsChunkPlugin({
name: 'ventor'
}),
]}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
CommonChunkPlugin
ventor入口这里我们发现并没有筛选出所有引用的node_module下的模块 ，比如axios ,所以导致打包到了app.js里了，这里我们做下分离
entry: {
vendor: ['vue', 'vue-router', 'vuetify', 'axios'],
app: './src/main.js'
},那这里又出现个问题了，我不可能手动去手动录入模块，这时我们可能需要 自动化分离 ventor，这里我们需要引入 minChunks，在配置中我们就可以对所有mode_module下所引用的模块进行打包 修改配置如下
entry: {
//vendor: ['vue', 'vue-router', 'vuetify', 'axios'], //删除
app: './src/main.js'
}new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: ({ resource }) => (
resource &&
resource.indexOf('node_modules') >= 0 &&
resource.match(/.js$/)
)
}),
经过上面几步的优化，我们再看看文件分布，会发现node_module下的模块都收归到了vendor下了。
这里我们可以得到一个经验，就是在一个项目中可以专门针对node_module下的模块进行打包优化。但是这里细心的你可能发现codemirror组件不也是node_module中的么，但为啥没被打包进去反而重复打包到其他单页面了呢，其实这里是因为在commonChunk中使用name属性其实也就意味着只会沿着entry入口去找寻所依赖的包，由于我们的组件采用的是异步加载，故这里就不会去打包了，我们做个实验验证下，现在我们去掉dbmanage和system页面的路由懒加载改为直接引入
