chunks: ['vendor'] }),
// 复制静态资源
// https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*'] }
])
]})
// 开启 gzip 的情况时，给 webpack plugins添加 compression-webpack-plugin 插件
if (config.build.productionGzip) {
// webpack 压缩插件
// https://github.com/webpack-contrib/compression-webpack-plugin
var CompressionWebpackPlugin = require('compression-webpack-plugin')
// 向webpackconfig.plugins中加入下方的插件
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
// 开启包分析的情况时， 给 webpack plugins添加 webpack-bundle-analyzer 插件
if (config.build.bundleAnalyzerReport) {
// https://github.com/th0r/webpack-bundle-analyzer
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
其他
如果你觉得在segmentfault的代码阅读体验不好，你可以到我github上将代码clone下来看。
vue-cli-webpack-analysis
总结
这次研究webpack配置的时候，我自己跟着源码敲了一遍（很笨的方法），然后，在github和webpack官网上查使用到的插件的作用和用法。经过这一次折腾，加深对webpack的认识。
