在前端开发中，Webpack 是一款非常流行的打包工具，可以帮助我们管理 JavaScript、CSS、图片等资源，并生成最终的静态资源文件。随着 ECMAScript 9 的发布，Webpack 也提供了更好的支持。在本文中，我们将学习如何在 ES9 中使用 Webpack 打包，并介绍遇到问题的解决方法。
安装和配置 Webpack
首先安装 Webpack。打开终端，运行以下命令：
npm install webpack webpack-cli --save-dev
这个命令将安装 Webpack 和 Webpack 命令行工具。接下来创建一个名为 webpack.config.js 的配置文件，这个文件将告诉 Webpack 怎么打包你的代码。
在 webpack.config.js 中，我们需要指定所有需要打包的文件的入口文件和最终生成的静态资源文件的输出路径。例如：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
--上面的代码将会把 ./src/index.js 这个入口文件打包成一个名为 bundle.js 的文件并输出到 dist 目录下。
在 ES9 中使用 Webpack
ES9 支持很多新的功能，如异步/await、展开语法，以及其他一些增强语法和一些新的数据结构和方法等。在我们使用 Webpack 打包的时候，我们需要针对这些新的功能进行配置才能正常使用。
添加 Babel 配置
Babel 是一个 JavaScript 编译器，可以将 ES9 语法编译成 ES5 语法。我们需要在项目中安装 Babel 和相关的插件，配置 Babel 打包规则来编译 ES9 语法。
运行以下命令安装 Babel 和相关插件：
npm install babel-loader @babel/core @babel/preset-env --save-dev
上面的命令将安装与 Webpack 集成所需的 Babel 来编译 ES9 语法。接下来在 webpack.config.js 中指定打包规则：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--上面的代码将会编译所有 .js 文件中的 ES9 语法，并输出到 dist 目录下。你可以在 .babelrc 文件中添加更复杂的压缩和优化插件来优化打包结果。
解决代码拆分问题
由于打包后文件的大小，有时候我们需要开启代码拆分，以便最终的生成的代码变得更小，以便加快网页加载的速度。Webpack 支持拆分代码，并在需要时动态加载模块。
要使用代码拆分功能，我们需要指定代码入口和输出模块的语法。下面是一个示例：
import('lodash').then(_ => {
// Use lodash as a utility library
});上面的代码将会在运行时动态加载 lodash 库，并使用它作为一个实用工具库。这样，我们只需要在代码中引入需要的库，其余部分将被拆分并在需要的时候动态加载。在 webpack.config.js 文件中，你只需要为要拆分的代码指定一个块名称即可：
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
-------- ------------------
--
------- -
--------- -------------------
----- ----------------------- -------
-
--上面的代码将生成两个带有名称的代码块：index 和 another，并将它们写入 dist 目录中。
总结
使用 Webpack 打包 ES9 非常简单，并为使用新功能带来了便利。在本文中，我们介绍了如何配置 Webpack、如何添加 Babel、如何解决代码拆分问题以及一些基本的示例代码。
如果你正在学习前端开发或者想要更好地理解和掌握 Webpack，那么这篇文章将对你非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652a577e7d4982a6ebcad207