随着 JavaScript 语言的发展和前端技术的不断升级，前端开发依赖的工具也变得越来越复杂。其中，Webpack 和 Babel 是前端开发领域最常用的两个工具。Webpack 是一款模块打包工具，而 Babel 则是一个编译 JavaScript 代码的工具，用于将 ES6/ES7 代码转换成 ES5 代码。在使用 Webpack 时，经常会与 Babel 配合使用。
最近，我在升级项目时遇到了 Webpack 4 引入 Babel 7 的问题。在升级后，项目无法正常打包，出现了一些错误。通过排查和尝试，我最终解决了这些问题，下面与大家分享。
问题解决
Webpack 4 去掉了对一些配置的自动识别，对 Babel 配置也做出了一些修改。因此，在 Webpack 4 中使用 Babel 7 时，需要进行一些新的配置，才能让它们兼容。下面，我们先来看一下出现的问题：
Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3"，即 Babel 的版本错误。You may need an appropriate loader to handle this file type.，即缺少处理相应类型文件的 loader。ReferenceError: Unknown plugin "transform-runtime", 即缺少 Babel 插件。
以上三个问题都是由于 Webpack 4 和 Babel 7 存在兼容性问题而导致的。下面，我们分别对这三个问题进行解决。
问题一：Babel 的版本问题
出现这个问题，主要是因为我们当前项目中 Babel 的版本不符合我们当前 Webpack 4 的要求。因此，我们需要升级 Babel 的版本。可以通过以下命令进行升级：
--- ------- ---------- ----------- ---------- -----------------
这里，我们需要安装的是 Babel 7 的核心依赖包 @babel/core、Babel 的命令行工具 @babel/cli 和 Babel 的预设 @babel/preset-env。
接下来，我们需要在项目中根据需要添加一些必要的 Babel 插件。例如，在 React 项目中，我们需要添加以下插件：
--- ------- ---------- -------------------
或：
--- ------- ---------- ------------------
在安装完插件后，我们需要在项目中添加 .babelrc 配置文件。配置文件内容如下：
-
---------- -
--------------------- -
---------- -
--------- -----
----- ----
--
-------------- --------
---------- ------
--------- -
---
---------------------
--
---------- -
----------------------------------
--------------------------------------
-----------------------------------------
-
-在上述配置文件中，我们添加了两个预设，@babel/preset-env 和 @babel/preset-react，分别用于转换普通的 JavaScript 和 React 代码。此外，我们还添加了一些常用的 Babel 插件。
需要注意的是，我们在使用@babel/preset-env 预设时，需要在其中添加 targets 配置项，用于指定我们的浏览器兼容性要求，如上述配置支持 Chrome58 和 IE11。同时，我们需要指定 useBuiltIns 为 entry，这样 Babel 会自动按需引入 polyfill。而 modules 则是设置为 false，这样可以避免 Webpack 对代码进行多余的处理。
问题二：缺少相应类型文件的 loader
这个问题很容易解决，我们只需要安装相应类型文件的 loader 即可。例如，在处理 .js 文件时，我们可以使用 babel-loader。在处理 .css 文件时，我们可以使用 css-loader 和 style-loader。我们在实战部分将会展示一个完整的配置样例。
问题三：缺少 Babel 插件
这个问题比较常见，原因也很简单，就是我们缺少了相应的 Babel 插件。在编写代码时，我们应该注意到在项目中使用了哪些 ES6 或 ES7 的新特性。按需安装这些特性所对应的 Babel 插件，就可以解决这个问题。
例如：要使用 async/await，需要安装 @babel/plugin-transform-async-to-generator 插件。要使用 spread 语法，需要安装 @babel/plugin-transform-spread 插件。
实战部分
下面，我们将给出一个完整的 Webpack 4 + Babel 7 的配置样例，供读者参考。
----- ---- - ---------------
----- ----------------- - ------------------------------
-------------- - -
------ -
---- ----------------
--
------- -
----- -------------------- --------
--------- ------------------
--
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
--------------- ---- -- ----
-
--
-------- -------------------- ------
--
-
----- ---------
---- -
---------------
------------
-
-
-
--
-------- -
--- -------------------
--------- -------------
--------- -------------------- -------------
--
-
-在 webpack.config.js 中，我们定义了两个 loader：babel-loader 和 css-loader。在 babel-loader 中，我们指定了使用 @babel/preset-env 预设，同时开启了缓存。由于 Webpack 4 的变化，在这里需要将 cacheDirectory 的值设置为 true.
至此，我们已经全部解决了 Webpack 4 引入 Babel 7 时所遇到的坑，希望大家在使用时不会再遇到相关问题。
总结
本文主要介绍了 Webpack 4 引入 Babel 7 时所遇到的问题，分析了其中的原因，并提出了相应的解决方法。通过本文的学习，读者会更深入地理解 Webpack 和 Babel 的使用原理，并能更好地应对相关问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652cf7a87d4982a6ebe7a4a8