在现代前端开发中，Webpack+Babel 是很常用的组合，Webpack 可以将多个 JavaScript、CSS、图片等文件打包成一个或多个 bundle，Babel 可以将新版 JavaScript 代码转换成老版 JavaScript 代码，以兼容更多浏览器。
本文将详细介绍如何正确配置 Webpack+Babel 进行前端打包，并附带示例代码。
安装 Webpack 和 Babel
首先，需要安装 Webpack 和 Babel：
--- ------- ------- ----------- ----------- ---------- ----------------- ----------
其中，
webpack是 Webpack 的核心库；webpack-cli是 Webpack 的命令行工具；@babel/core是 Babel 的核心库；@babel/cli是 Babel 的命令行工具；@babel/preset-env是 Babel 的预设，可以根据环境自动转换语法。
配置 Webpack 和 Babel
接下来，需要编写 Webpack 和 Babel 的配置文件。
新建一个 webpack.config.js 文件：
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--该配置文件告诉 Webpack：
- 把
./src/index.js这个入口文件打包成bundle.js； - 把打包后的
bundle.js放到./dist目录下； - 对于所有以
.js结尾的文件，使用babel-loader这个加载器，并且使用@babel/preset-env这个预设进行转换。
接下来，需要编写 Babel 的配置文件。
新建一个 .babelrc 文件：
- ---------- --------------------- -
该配置文件告诉 Babel 使用 @babel/preset-env 这个预设进行转换。
编写示例代码
为了演示如何正确配置 Webpack+Babel 进行前端打包，这里编写一个使用新版 JavaScript 语法的示例代码，并且使用 Webpack+Babel 进行打包后，能够在更多浏览器中正常运行。
新建一个 src/index.js 文件：
----- ----- - -- -- - ------------------- --------- -- --------
该代码使用了箭头函数和模板字符串，这些语法在一些老版浏览器中不支持。
运行打包命令
最后，需要运行打包命令，将示例代码打包成一个 bundle.js 文件。
在 package.json 这个文件中，添加一个 build 命令：
-
---------- -
-------- ---------
-
-在命令行中运行：
--- --- -----
Webpack 会将示例代码打包成一个 bundle.js 文件，并且使用 Babel 进行转换，以兼容更多浏览器。
结论
通过本文的介绍，我们学习了如何正确配置 Webpack+Babel 进行前端打包，并且演示了如何使用示例代码进行打包，以提高代码的兼容性。
在实际开发中，除了上述介绍的配置，还有很多其他的配置和插件可以使用，例如代码分割、压缩等等，可以根据需求进行定制。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672443972e7021665e12d404