在前端开发中，使用 Webpack 进行打包是一种常见的选择，它能将多个模块打包到一个或多个 bundle 中，方便部署和管理。然而，有时在打包过程中会出现“TypeError: Cannot assign to read only property 'exports' of object '#<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，在打包过程中自动加载某些模块，避免手动引入时的重复性问题。
下面是一个示例配置：
-- -------------------- ---- -------
-------------- - -
-----
-------- -
--- -----------------------
----------- ----------------------- ----------------
----------- ----------------------- ----------------
---
--
--这个配置告诉 Webpack 在打包过程中，如果遇到模块 B 或模块 C 的引用，就自动加载对应的模块，避免出现重复引用的问题。
方法三：使用 DllPlugin
我们也可以使用 Webpack 的 DllPlugin 和 DllReferencePlugin，将一些常用的模块先打包好，再在需要的时候引用，避免重复打包和引用带来的问题。
详细过程可参考：Webpack DllPlugin 优化前端打包速度
总结
在 Webpack 打包过程中出现“TypeError: Cannot assign to read only property 'exports' of object '#<object>'”这样的错误时，需要首先分析其原因，通常是因为模块重复引用导致的。为了解决这个问题，我们可以使用 resolve.alias、ProvidePlugin、DllPlugin 等方法，在打包过程中避免重复引用的问题，保证代码质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a74a11add4f0e0ff048bdd