什么是 Webpack
Webpack 是一个以模块化的方式打包和构建前端资源的工具。通过 Webpack，我们可以将多个 JavaScript、CSS、Image 等文件打包成一个或多个文件，并且可以解决 JavaScript 模块互相引用的问题。Webpack 广泛应用于前端工程化中，是前端开发不可或缺的工具之一。
Webpack 编译 es6 报错问题
随着 ECMAScript 6（简称 es6）标准的普及，越来越多的前端开发者开始使用 es6 语法。然而，在 Webpack 构建中，当我们使用了 es6 语法却没有做相关配置时，Webpack 会报错，如下图所示：
这是因为默认情况下，Webpack 只能编译 ES5 的 JavaScript 代码，而 es6 的语法需要使用 babel 进行转换后才能被 Webpack 识别。接下来，我们将介绍如何通过配置来解决这个问题。
配置 babel
babel 是一个广泛使用的 JavaScript 编译器，可以将 JavaScript 的新语法转换为旧版本的语法，以便浏览器可以执行。在 Webpack 中，我们可以使用 babel-loader 来调用 babel。
安装 babel
我们首先需要安装 babel-loader 和相关的 babel 插件。在终端中执行以下命令：
--- ------- ---------- ------------ ----------- ----------------- -------
这里使用了 @babel/preset-env，它包含了所有的 es6 转译规则，并且可以根据你需要转译的目标环境进行自动的优化和调整。
配置 babel
在 webpack.config.js 中，我们需要添加关于 babel-loader 的相关配置。在这个配置中，我们指定了转译规则和要转译的文件类型，如下所示：
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-这段代码的含义是：
test：筛选需要转换的文件，这里表示只需要转换 js 文件；exclude：排除掉不需要转换的文件夹；use：使用 babel-loader 进行转换；options：使用的 preset。
使用 babel
完成配置后，我们就可以在项目中使用 es6 的语法了，例如：
----- --------- - -- -- - ------------------ -------- -- ------------
结论
Webpack 是前端工程化不可或缺的工具之一，能够很好地打包和构建前端资源。在使用 Webpack 进行 es6 构建时，我们需要配置 babel，来让 Webpack 执行 es6 的语法。通过以上的方法，我们可以在 Webpack 中使用 es6 的语法而不会报错。
示例代码
完整的 webpack.config.js 文件和示例代码如下：
-------------- - -
------ -----------------
------- -
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-index.js 文件中代码：
----- --------- - -- -- - ------------------ -------- -- ------------
执行命令：
--- ------- -------- -----------------
即可打包输出 bundle.js 文件，输出结果为：
----- --------------------
-------- ------- ------
----- ----
----- --- ---------- --------
----- ---- ------ ----- -----
--------- ---- --- - --------- ----
---------- ---- - ---------
--- -------------- -- ----- --- -------
- - ------ ------打开 index.html 就可以看到控制台输出 "Hello World"。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672b1449ddd3a70eb6d194c6