# webpack-bundle-analyzer 插件
webpack-bundle-analyzer 可以在打包后的目录产生一个文件，用以分析打包性能
1. `npm install webpack-bundle-analyzer -D`
2. 在webpack.config.js的production模式下，引入并使用
```
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
```
使用这个插件，run build打包后，会开启一个本地服务，会很直观的在浏览器中展示每个包的大小
# 自定义 cli进行打包，不使用 webpack-cli 打包，vue-cli 和 react-cli 就没有使用 webpack-cli
1. 在根目录定义 build.js：
```
const webpack = require('webpack')
// 导入我们自定义的webpack打包配置
const config = require('./config/webpack.common')({
production: true
})
const compiler = webpack(config)
// 执行webpack打包
compiler.run((err, stats) => {
if(err){
console.error(err)
}else{
console.log(stats)
}
})
```
2. 在terminal执行命令：
`node build.js`