随着 ES6 语法的普及，越来越多的前端开发者开始使用新的语法特性来提高代码的可读性和可维护性。但是，由于浏览器对于 ES6 语法的支持不完整，需要使用 babel 进行转译。而在开发环境和生产环境下，我们需要不同的 babel 配置来实现不同的转译效果。本文将详细介绍如何使用 Webpack5 和 babel7 来解决这个问题。
Webpack5 和 babel7 的基本配置
首先，我们需要安装 webpack 和 babel 的相关依赖：
--- ------- ------- ----------- ------------ ----------- ----------------- ----------
然后，我们需要在项目根目录下创建一个 webpack.config.js 文件，配置 webpack 的入口、输出、模块等选项：
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
--
--
--
--
--上述配置中，我们使用了 babel-loader 来处理所有的 .js 文件，同时排除了 node_modules 目录下的文件。
接下来，我们需要在项目根目录下创建一个 .babelrc 文件，配置 babel 的转译规则：
-
---------- -
-------------------
-
-上述配置中，我们使用了 @babel/preset-env 来转译所有的 ES6 语法特性。
开发环境下的配置
在开发环境下，我们需要实现以下功能：
- 自动刷新页面
- 显示源代码
为了实现以上功能，我们需要使用以下依赖：
--- ------- ------------------ ------------------- ----------
然后，我们需要更新 webpack.config.js 文件，添加 devServer 和 plugins 选项：
----- ----------------- - -------------------------------
-------------- - -
-- ---
---------- -
------------ ---------
--
-------- -
--- -------------------
------ --------- - ------ ------
---
--
--上述配置中，我们使用了 HtmlWebpackPlugin 来自动生成 HTML 文件，并将生成的文件放置在 ./dist 目录下。
最后，我们需要在 package.json 文件中添加以下脚本：
-
---------- -
-------- -------- ----- -------
-
-现在，我们可以使用 npm start 命令来启动开发服务器，并在浏览器中访问 http://localhost:8080/ 来查看我们的应用程序。
生产环境下的配置
在生产环境下，我们需要实现以下功能：
- 压缩代码
- 提取公共模块
为了实现以上功能，我们需要使用以下依赖：
--- ------- --------------------- ---------------------------------- ----------
然后，我们需要更新 webpack.config.js 文件，添加 mode 和 optimization 选项：
----- ------------ - ---------------------------------
----- ----------------------- - ----------------------------------------------
-------------- - -
----- -------------
-- ---
------------- -
--------- -----
---------- -
--- ---------------
--- --------------------------
--
------------ -
------- ------
--
--
--上述配置中，我们使用了 TerserPlugin 来压缩 JavaScript 代码，使用 OptimizeCSSAssetsPlugin 来压缩 CSS 代码，使用 splitChunks 来提取公共模块。
最后，我们需要在 package.json 文件中添加以下脚本：
-
---------- -
-------- ---------
-
-现在，我们可以使用 npm run build 命令来构建我们的应用程序，并将生成的文件放置在 ./dist 目录下。
示例代码
完整的示例代码可以在我的 GitHub 仓库中找到：webpack5-babel7-demo。
总结
通过本文的介绍，我们学习了如何使用 Webpack5 和 babel7 来解决开发环境和生产环境下的 ES6 语法转译问题。我们还学习了如何使用 webpack-dev-server、HtmlWebpackPlugin、TerserPlugin 和 OptimizeCSSAssetsPlugin 等插件来实现自动刷新页面、显示源代码、压缩代码和提取公共模块等功能。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f566332b3ccec22fd872c9