序言
Webpack 是一个现代化的 JavaScript 应用程序打包器（module bundler）。通过使用 Webpack，许多开发者成功地实现了自动化构建前端项目的目标。本文主要讲解在构建单页面应用时 Webpack 的使用注意事项，通过一些深入浅出的实例帮助读者深入了解 Webpack 的使用方法。
前置知识
在阅读本文前，读者应该掌握以下知识：
- 基本的 JavaScript 编程语言能力；
- Node.js 以及 npm 的基础知识。
入门
Webpack 的工作原理是将各种类型的资源（JavaScript、CSS、PNG、GIF、SVG 等等）作为模块来处理，并将它们视为依赖关系图的节点。这样，Webpack 就可以将整个应用程序打包成一个或多个文件，以便页面加载更快。
安装 Webpack
安装 Webpack 的前提是有 Node.js 和 npm。
- ----------- ----- ------------------ -- ------------------ - ------- --- - --- ---- -- - ------- ------- - ----------- --- - ------- ----------- --
配置 Webpack
Webpack 需要一个配置文件，在项目根目录下新建一个名为 webpack.config.js 的文件。
----- ---- - ---------------
-------------- - -
----- ------------- -- ----
------ ----------------- -- --
------- -
--------- ---------- -- ---
----- ----------------------- ------- -- ----
-
-以上是一个简单的配置文件示例，其中包含了三个主要的配置项：mode、entry、output。
mode
mode 选项表示 Webpack 打包的模式。有三种可选项：development、production 和 none。当设置为 development 或 production 时，Webpack 会自动提供优化选项并包含内置插件。
entry
配置应用程序入口点，Webpack 会从入口点开始构建依赖关系图。
output
output 配置项告诉 Webpack 在构建文件时的输出目录以及输出的文件名。
构建打包
在终端中输入以下命令进行构建打包。
--- -------
高级
当应用程序的规模增大时，复杂性也会增加，这就需要更进一步的配置。
文件处理
Webpack 可以处理各类文件，但是必须通过相应的 loader（加载器）进行配置。
例如，处理 CSS 文件需要使用 css-loader 和 style-loader。
- ------ --- - ---------- ------------ --
配置文件示例：
-------------- - -
----- -------------
------ -----------------
------- -
--------- ----------
----- ----------------------- -------
--
------- -
------ -
-
----- --------- -- --------
---- -
--------------- -- -- ------- --
------------ -- ------- ----- -
-
--
-- ----
-
----- ----------------------
---- -
-
------- --------------
-------- -
----------- ----------------
--
--
--
-
-
-
-插件
除了 loader，Webpack 还可以使用插件来扩展功能，例如压缩文件、抽离公共代码等。
- ------ --- - -------------------- --------------------- --
配置文件示例：
----- - ------------------ - - --------------------------------
----- ------------------- - ---------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ----------
----- ----------------------- -------
--
------- -
------ -
---
-
--
-------- -
--- ---------------------
--- ----------------------
-
-高级配置
Webpack 具有极高的可配置性，但在自定义配置之前需要了解 Webpack 的内部机制。深入了解 Webpack 有助于更好地理解它的工作原理以及优化构建进程的可行性。
Webpack 的配置可以分为三个阶段：解析阶段、转化阶段和输出阶段。通过配置不同阶段的选项，可以深度定制打包过程。
-------------- - -
----- -------------
------ -----------------
------- -
--------- ----------
----- ----------------------- -------
--
------- -
------ -
---
-
--
-- ----
-------- -
-- ------------------------------------
------ -
---- ----------------------- -------
--
-- ----------
-------- -
---------------
----------------------- ------
--
-- ----------
----------- ------- -------- ------ --------
--
-- ----
------------- -
------------ -
------- -----
--
--------- -----
---------- -
--- ----------------------
--
-
-结论
Webpack 可以灵活处理现代 Web 应用程序的各种构建需求。本文回顾了如何使用 Webpack 构建单页面应用程序，以及如何通过轻松优雅的用法和高级技术，优化分布式构建和打包的过程。
最后，大家可以参考以下 Webpack 的配置模板，方便快捷地完成构建。
-------------- - -
----- -------------
------ -----------------
------- -
----- ----------------------- ----------
--------- --------------------------
--
-------- -------------
------- -
------ -
-
----- --------
-------- ---------------
------- ------------
--
--
--
-------- -
----------- ------- -------
--
---------- -
------------ -------------------- ----------
--------- -----
----- -----
--
------------- -
--------- -----
---------- -
--- ----------------------
--
------------ -
------- ------
--
--
-------- -
--- ---------------------
--- -------------------
------ -------- -----
--------- -------------
---
--
--来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67247cb52e7021665e13b3ab