在使用 React 开发应用时，Webpack 是一个不可或缺的工具。Webpack 可以将多个 JavaScript 文件打包成一个文件，从而减小文件的体积，加快应用的加载速度。然而，在使用 Webpack 打包 React 应用时，我们可能会遇到一些问题。本文将介绍几个常见的坑，并提供解决方案。
1. Webpack 打包后的文件体积过大
在使用 Webpack 打包 React 应用时，我们可能会发现打包后的文件体积很大，甚至比源代码还要大。这是因为 Webpack 默认会将所有模块打包成一个文件，包括 React 和其它第三方库。解决这个问题的方法是使用 Webpack 的代码分割功能。代码分割可以将应用代码和第三方库代码分开打包，从而减小文件体积。
使用代码分割的方法很简单，只需要在 Webpack 配置文件中设置 optimization.splitChunks 属性即可。下面是一个示例：
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------- ------
----- -----
------------ -
-------- -
----- -------------------------
--------- ----
----- ----------
--
--
--
--
--在上面的配置中，我们将第三方库打包到了 vendors.js 文件中，应用代码打包到了 main.js 文件中。
2. Webpack 打包后的文件中包含了重复的代码
在使用 Webpack 打包 React 应用时，我们可能会发现打包后的文件中包含了重复的代码，这会导致文件体积更大，加载速度更慢。解决这个问题的方法是使用 Webpack 的代码分割和缓存功能。
代码分割已经介绍过了，下面我们来介绍一下缓存功能。Webpack 可以对每个模块生成一个唯一的标识符，称为模块标识符。当某个模块被打包时，Webpack 会将这个模块的代码和模块标识符一起打包到一个文件中。当另一个模块需要引用这个模块时，Webpack 会使用这个模块的标识符来查找缓存，如果找到了，就直接使用缓存中的代码，避免了重复打包。
要启用缓存功能，我们只需要在 Webpack 配置文件中设置 optimization.runtimeChunk 属性即可。下面是一个示例：
module.exports = {
// ...
optimization: {
runtimeChunk: 'single',
},
};在上面的配置中，我们启用了运行时模块缓存功能，将运行时模块打包到了 runtime.js 文件中。
3. Webpack 打包后的文件无法在 IE11 中运行
在使用 Webpack 打包 React 应用时，我们可能会发现打包后的文件无法在 IE11 中运行。这是因为 IE11 不支持 ES6 的语法。解决这个问题的方法是使用 Babel 将 ES6 代码转换为 ES5 代码。
要使用 Babel，我们需要安装 @babel/core 和 babel-loader 这两个依赖。下面是一个示例：
npm install --save-dev @babel/core babel-loader
安装完成后，我们需要在 Webpack 配置文件中配置 Babel。下面是一个示例：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- ------------------------------------
--
--
--
--
--
--在上面的配置中，我们将所有 .js 文件都交给 Babel 处理，并使用 @babel/preset-env 和 @babel/plugin-transform-runtime 两个插件将 ES6 代码转换为 ES5 代码。
结论
在使用 Webpack 打包 React 应用时，我们可能会遇到一些问题。本文介绍了几个常见的坑，并提供了解决方案。希望本文能够帮助读者更好地使用 Webpack 打包 React 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67470d50e504cb428ed02eb8