如何解决 Webpack 打包后出现 “TypeError: Cannot assign to read only property 'exports' of object '#<Object>'” 错误

在前端开发中，使用 Webpack 进行打包是一种常见的选择，它能将多个模块打包到一个或多个 bundle 中，方便部署和管理。然而，有时在打包过程中会出现“TypeError: Cannot assign to read only property 'exports' of object '#'”这样的错误信息，这篇文章就来分析一下这种错误的原因和解决办法。

错误原因

这个错误的原因是因为在某些情况下，Webpack 打包后的代码中存在重复的模块引入，导致该模块的输出对象（exports）被设置为只读属性（read-only property）。这样，如果试图给这个对象重新赋值，就会出现上述错误。

具体来说，如果一个模块 A 依赖于模块 B 和模块 C，而模块 C 也依赖于模块 B，则当打包模块 A 时，模块 B 会被打包两次，因为模块 A 和模块 C 都引用了模块 B。这样，模块 B 的输出对象就会被设置为只读属性，因为只有第一次引用 B 的模块可以修改它。

解决方法

为了解决这个问题，我们需要确保在打包过程中不会出现重复的模块引入。以下是一些常用的解决方法：

方法一：使用 resolve.alias

我们可以使用 Webpack 的 resolve.alias 配置选项，将重复引用的模块映射到一个公共的路径上。这样，在打包过程中就只会引用一次该模块的代码，避免出现只读属性的错误。

下面是一个示例配置：

module.exports = {
  //...
  resolve: {
    alias: {
      'module-b': path.resolve(__dirname, 'src/module-b'),
    },
  },
};

这个配置告诉 Webpack 将所有对 'module-b' 的引用都重定向到 src/module-b.js。

方法二：使用 ProvidePlugin

我们也可以使用 Webpack 的 ProvidePlugin，在打包过程中自动加载某些模块，避免手动引入时的重复性问题。

下面是一个示例配置：

module.exports = {
  //...
  plugins: [
    new webpack.ProvidePlugin({
      'module-b': path.resolve(__dirname, 'src/module-b'),
      'module-c': path.resolve(__dirname, 'src/module-c'),
    }),
  ],
};

这个配置告诉 Webpack 在打包过程中，如果遇到模块 B 或模块 C 的引用，就自动加载对应的模块，避免出现重复引用的问题。

方法三：使用 DllPlugin

我们也可以使用 Webpack 的 DllPlugin 和 DllReferencePlugin，将一些常用的模块先打包好，再在需要的时候引用，避免重复打包和引用带来的问题。

详细过程可参考：Webpack DllPlugin 优化前端打包速度

总结

在 Webpack 打包过程中出现“TypeError: Cannot assign to read only property 'exports' of object '#'”这样的错误时，需要首先分析其原因，通常是因为模块重复引用导致的。为了解决这个问题，我们可以使用 resolve.alias、ProvidePlugin、DllPlugin 等方法，在打包过程中避免重复引用的问题，保证代码质量和稳定性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a74a11add4f0e0ff048bdd