5

我正在尝试为 webpack-bundle-analyzer 配置我的 webpack.config。这是它的外观。

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

它只显示 index.js、main.js 和 src 文件夹。如何查看我的所有其他依赖项？

在此处输入图像描述

4

4 回答 4

8

首先 npm install --save-dev webpack-bundle-analyzer 其次，在 webpack.config.js 中添加一些配置 这是我在 config/webpack.config.js 中使用 create react app 时的配置

在顶部导入库

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

还添加一些验证，以便您的构建脚本在部署到生产时不会出现问题

const withReport = process.env.npm_config_withReport

在插件中添加此代码

plugins:[
  withReport ? new BundleAnalyzerPlugin() : '',
]

最后，在包 JSON 中添加一个新脚本

"report": "npm run build --withReport true"

在终端中运行“npm run report”。应该会自动出现 webpack 包分析器 UI

于 2019-11-17T17:09:41.760 回答
5

如果你使用Create React App，一个更简单的方法是去package.json编辑 npm 脚本。

  1. 运行npm install --save-dev webpack-bundle-analyzer安装 webpack-bundle-analyzer
  2. 在脚本命令--stats的末尾添加一个标志"build"
  3. "analyze"添加一个名为如下所示的新脚本
"scripts": {
  ...
  "build": "react-scripts build --stats",
  "analyze": "webpack-bundle-analyzer build/bundle-stats.json",
},

接下来，运行npm run build，然后npm run analyze。

于 2021-07-26T10:04:27.237 回答
1

这样您就可以在webpack-bundle-analyzer 不弹出React 应用程序的情况下进行配置

  1. 通过执行添加一些依赖项npm install --save-dev progress-bar-webpack-plugin webpack-bundle-analyzer
  2. scripts在 React App 的根目录下创建一个新文件夹。
  3. 在文件夹中创建一个新文件并analyze_build_bundle.js在该scripts文件中添加以下代码

// script to enable webpack-bundle-analyzer
process.env.NODE_ENV = 'production';
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const webpackConfigProd = require('react-scripts/config/webpack.config')(
  'production'
);

const ProgressBarPlugin = require('progress-bar-webpack-plugin');

webpackConfigProd.plugins.push(new BundleAnalyzerPlugin());
webpackConfigProd.plugins.push(
  new ProgressBarPlugin({
    format: `analyzing... [:bar] [:percent] [:elapsed seconds] - :msg`,
  })
);

// actually running compilation and waiting for plugin to start explorer
webpack(webpackConfigProd, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err);
  }
});

  1. 在文件中添加analyze-build-bundle命令package.json以运行webpack-bundle-analyzer如下：

"scripts": {
    "analyze-build-bundle": "node scripts/analyze_build_bundle.js",
    "start": "react-scripts start",
    .....
    ...
}

  1. 现在执行命令npm run analyze-build-bundle。这将构建您的应用程序，然后启动分析器本地服务器，您应该能够看到如下图所示的屏幕

在此处输入图像描述

于 2022-01-28T07:45:42.180 回答
0

要运行带有可选参数的插件，对我来说，以下主题中提出的解决方案效果更好： webpack config with optional usage of BundleAnalyzerPlugin

我通过对我的 webpack.config.js 进行了一些更改来解决这个问题。

首先我改变了我声明 withReport 的方式。然后我改变了实例化 BundleAnalyzerPlugin 的方式，改为在其他插件之后使用 concat：

...
const withReport = process.env.npm_config_withReport ? true : false;
...
plugins: [
...
].concat(withReport ? [new BundleAnalyzerPlugin()] : []),
...
于 2021-09-24T12:26:08.217 回答