Webpack 常用插件

speed-measure-webpack-plugin

可以在build的时候看到webpack的loader和plugin所用的时间，配置非常简单。
用法：

// vue.config.js
module.exports = {
chainWebpack: config => {
   config.plugin('speed')
   .use(SpeedMeasureWebpackPlugin)
 }
}

webpack-bundle-analyzer

可以帮我们可视化的展示build时的每个包的大小以及依赖。vue-cli也帮我们做了默认的配置，我只需要在build的后面加一个参数—report即可。

NamedModulesPlugin

替换HMR中模块的名称

const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin'); module.exports = {   plugins: [     // 显示出被替换模块的名称     new NamedModulesPlugin(),   ], };