web-dev-qa-db-ja.com

webpack-bundle-analyzerの実行方法

Webpack-bundle-analyzerをインストールし、実行する必要があります。どうすればいいですか？いくつかのエラーがあります。最も一般的なのは

Could't analyze webpack bundle
webpackwebpack-dev-serverwebpack-2
10
Roman

最後に、2つの方法でこの問題を解決できることがわかりました。 詳細を参照 。いずれにしても、webpack.config.jsに追加する必要があります

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

そしてへ

plugins : [ 
  new BundleAnalyzerPlugin({
    analyzerMode: 'server',
    generateStatsFile: true,
    statsOptions: { source: false }
  }),
  ...
],

次に、ビルドを行うたびにブラウザーでレポートhtmlページを表示する場合、アクションは不要です。

CLIを使用してレポートページを時々実行する場合は、次のようにwebpack.config.jsでサーバーを無効にする必要があります。

plugins : [ 
  new BundleAnalyzerPlugin({
    analyzerMode: 'disabled',
    generateStatsFile: true,
    statsOptions: { source: false }
  }),
  ...
],

package.jsonのスクリプトセクションに行を追加するには：

"scripts": {
  "bundle-report": "webpack-bundle-analyzer --port 4200 dist/stats.json",
  ...
}

2番目の選択をしました。

26
Roman