前言
Webpack 是一个强大的构建工具，可以用于将多个 JavaScript 文件打包成一个或多个 bundle 文件。但是，它不仅限于 JavaScript 文件。实际上，我们可以使用 Webpack 打包许多不同类型的文件。在本文中，我们将学习如何使用 Webpack 构建简单的 HTML 页面。
安装 Webpack
首先，我们需要安装 Webpack。我们可以使用 npm 进行安装。打开命令行界面，并输入以下命令：
npm install webpack webpack-cli -g
这会全局安装 Webpack 和 Webpack 命令行工具。
创建 HTML 文件
我们首先需要创建一个 HTML 文件。在文件夹中新建一个名为 index.html 的文件，并添加以下代码：
-- -------------------- ---- -------
------
------
-------------- ---- ------------
-------
------
---------- -------------
------- -------------------------
-------
-------此时，我们还没有生成 bundle.js 文件，但是我们已经将其加入到 HTML 文件中。这会在加载完 HTML 文件后自动加载生成的 bundle 文件。
创建入口文件
接下来，我们需要创建一个入口文件，用于告诉 Webpack 在打包文件时要打包哪些文件。在文件夹中新建一个名为 index.js 的文件，并添加以下代码：
// index.js
console.log('Hello, Webpack!');配置 Webpack
如果我们尝试在目前的状态下运行 Webpack，将会抛出一个错误，因为 Webpack 不知道该如何打包我们的代码。为了解决这个问题，我们需要创建一个名为 webpack.config.js 的文件来告诉 Webpack 让它如何打包我们的代码。
在文件夹中新建一个名为 webpack.config.js 的文件，并添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -------------
----- --------------
------- -
--------- ------------
----- ----------------------- --------
--
--让我们来详细看一下这个配置。我们首先需要将 path 引入，用于在 Webpack 配置中通过 node.js 文件系统模块进行操作。module.exports 允许我们将当前的配置对象输出供 Webpack 使用。
在 config 中，我们设置了入口文件 index.js，设置了环境模式为 development，并设置了输出配置：我们将打包后的文件命名为 bundle.js，并将它输出到 dist 文件夹中。现在，在文件夹中创建一个名为 dist 的文件夹。
运行 Webpack
现在，我们可以运行以下命令来打包我们的代码：
webpack --config webpack.config.js
此命令将会运行 Webpack 并使用我们刚刚创建的配置文件 webpack.config.js。如果一切顺利，你应该可以看到命令行输出类似这样的信息：
Hash: 9b0907ee31f5c5ea5d5b
Version: webpack 4.44.2
Time: 37ms
Built at: 2021-02-26 16:37:49
Asset Size Chunks Chunk Names
bundle.js 96 bytes main [emitted] main
Entrypoint main = bundle.js
[./index.js] 29 bytes {main} [built]运行 HTML 页面
现在我们已经生成了 bundle.js 文件，我们可以在浏览器中打开 index.html 文件并查看控制台。你应该会看到类似这样的输出：
Hello, Webpack!
结论
现在，我们已经创建了一个使用 Webpack 构建的简单 HTML 页面。Webpack 的强大之处在于它可以打包多种类型的文件，并且高度可配置。本文只是一个简单的入门教程，Webpack 的应用已经渗透到实际开发的许多方面。我希望你通过这篇文章能够对 Webpack 产生浓厚的兴趣，并能够自立门户学习更高级的应用。以下是完整的示例代码：
index.html
-- -------------------- ---- -------
------
------
-------------- ---- ------------
-------
------
---------- -------------
------- -------------------------
-------
-------index.js
// index.js
console.log('Hello, Webpack!');webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -------------
----- --------------
------- -
--------- ------------
----- ----------------------- --------
--
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67188a19ad1e889fe22c4d29