webpack-bundle-analyzer使用

1、作用

webpack的可视化资源分析工具。查看项目中各模块文件大小、定位模块包含内容，也能看到使用gzip压缩后的模块大小，进而对模块进行优化。

2、安装及配置

npm install --save-dev webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'server',
      analyzerHost: '127.0.0.1',
      analyzerPort: '8888',
      logLevel: 'info'
    }),
  ]
}

package.json中设置

"scripts": {
    "dev": "webpack-dev-server --open --config webpack.dev.js",
    "prod": "webpack --config webpack.prod.js",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack --config webpack.config.js",
    "server": "node server.js",
    "analysis": "NODE_ENV=production npm_config_report=true npm run prod"
  },

细节查看：https://www.npmjs.com/package/webpack-bundle-analyzer