Webpack Bundle分析插件配置后报错怎么办？

IT人一涵提问于 2026-02-04 21:45:29 阅读 47

工具

我在用webpack-bundle-analyzer分析打包体积时，按文档配置了插件，但启动时总报TypeError: Class extends value undefined is not a function，这是什么问题？

配置是这样的：


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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false
    })
  ]
};

我尝试过删除node_modules重装，也确认了webpack和插件版本兼容性，但问题依旧。运行环境是webpack5，插件版本是4.5.0，有没有可能是配置参数的问题？

Loader

我来解答赞 6 收藏

反馈

2 条解答

一怡然 Lv1

你这个报错不是配置参数的问题，是典型的模块引入方式错误。webpack-bundle-analyzer 的默认导出是 CommonJS 模块，你在 ES module 语法下直接解构会拿到 undefined。

问题就出在这行：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

改成这样就行：

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

或者更稳妥的写法：

const webpackBundleAnalyzer = require('webpack-bundle-analyzer');

const BundleAnalyzerPlugin = webpackBundleAnalyzer.BundleAnalyzerPlugin;

你现在的写法相当于在对一个 undefined 的值做 class extends，自然就爆 TypeError 了。这个坑在混合使用 require 和 ES6 解构时很常见，尤其是第三方库没做好 default export 的时候。

插件本身没问题，4.5.0 版本和 Webpack 5 是兼容的，别折腾版本了，改完引入方式重启构建就行了。

2026-02-11 23:06

Zz钰岩 Lv1

你这个报错是因为用法不对，webpack5 要用 webpack-bundle-analyzer 的 BundleAnalyzerPlugin 必须通过 require 引入方式有问题。改成这样就行：

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

或者更懒一点，直接用：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer/dist/cjs.js');

这样就能正常用了，别问为啥，webpack5 的 require 方式变了而已。

2026-02-04 22:03