在前端开发中，webpack 是目前最流行的打包工具之一。它可以将多个 JavaScript、CSS 文件打包成一个或多个用于浏览器加载的 bundle，可以完成诸如压缩、混淆等操作，还可以处理资源文件、样式文件等，非常方便。
本文将介绍如何使用 webpack3 打包单页面应用（SPA），包括基本配置和一些高级操作，帮助读者更好地进行前端开发。
前置条件
在开始学习 webpack3 打包 SPA 之前，需要了解以下知识：
- HTML、CSS、JavaScript
- Node.js、npm
- webpack 的基本概念和术语，如 entry、output、loader、plugin 等
配置 webpack3
安装 webpack
首先，需要在项目根目录下使用 npm 安装 webpack：
$ npm install webpack webpack-cli --save-dev
配置基本选项
在项目根目录新建一个 webpack.config.js 文件，作为 webpack 的配置文件。配置文件中需要指定入口文件（entry）、输出文件（output）以及 loader 和 plugin 等配置。
下面是一个基本的 webpack.config.js 配置文件，其中配置了 entry 和 output：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ----------------- -- ----
------- - -- ----
--------- ------------
----- ----------------------- -------
-
--在上面的配置中，entry 指定了项目的入口文件，output 指定了输出文件的名称和路径。其中，__dirname 表示当前文件的目录，path.resolve 表示把输出路径和 __dirname 连接起来。
加载 CSS 文件
除了编译 JavaScript 文件外，webpack 还支持处理 CSS 文件。可以使用 css-loader 和 style-loader 来加载 CSS 文件，处理后以 style 标签形式注入到 HTML 中。
安装 css-loader 和 style-loader：
npm i css-loader style-loader --save-dev
接下来在 webpack.config.js 文件中加入以下配置，即可加载 CSS 文件：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--在这个配置中，test 属性指定了要加载的文件规则，use 属性指定了使用的 loader。在 webpack 处理文件时，会先用 css-loader 处理 CSS 文件，然后用 style-loader 将处理后的 CSS 注入到 HTML 中。
加载图片和字体
webpack 还支持加载图片和字体等静态资源。可以使用 file-loader 和 url-loader 配置来处理这些类型的文件。
安装 file-loader 和 url-loader：
npm i file-loader url-loader --save-dev
在 webpack.config.js 文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- ---------
--
--
--
--
-
----- ----------------------------------
------- --------------
-------- -
----- ---------------
----------- --------
--
--
--
--
--其中，test 属性分别指定了 PNG、JPG、GIF 和字体文件的规则。在处理图片文件时，使用 url-loader 将小于 8192 字节的图片转换成 base64，并将输出写入到 dist/images 目录下。在处理字体文件时，使用 file-loader 输出到 dist/fonts 目录下。
配置开发服务器
在开发时，可以使用 webpack-dev-server 来配置一个本地开发服务器，自动监听文件变化并实时更新浏览器。使用以下命令安装 webpack-dev-server：
npm i webpack-dev-server --save-dev
在 webpack.config.js 文件中添加以下配置，即可启动本地开发服务器：
module.exports = {
devServer: {
contentBase: './dist',
port: 8080
},
};其中，contentBase 表示本地服务器启动的根目录，port 表示使用的端口号。
示例代码
下面是一个使用 webpack3 打包单页面应用的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
-------------- - -
------ -----------------
------- -
--------- -------------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- ----------------------------- -------------
--
-
----- -------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- ---------
--
--
--
--
-
----- ----------------------------------
------- --------------
-------- -
----- ---------------
----------- --------
--
--
--
--
-------- -
--- -------------------
--------- -------------------
------- -
------------------- -----
--
---
--- ----------------------
--------- --------------------
-------------- ------------------
---
--- --------------------------
--
---------- -
------------ --------
--
--在这个示例代码中，配置了 MiniCssExtractPlugin 和 OptimizeCssAssetsPlugin 插件来提取和压缩 CSS 文件，配置了 HtmlWebpackPlugin 插件来生成 HTML 文件，配置了开发服务器，以及一些简单的 loader 配置。可以使用这个示例代码进行实践学习。
总结
使用 webpack3 打包 SPA 可以帮助前端开发者更好地管理和优化项目代码。本文介绍了 webpack3 的基本配置和高级操作，希望能对读者的工作和学习有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6655b766d3423812e4a7838c