在本系列文章的基础上，我对脚手架配置进行了一些优化整理，基于 Webpack4 和 Vue，下面是文章链接：
基于 Webpack4 + Vue 的多页应用解决方案（一）
基于 Webpack4 + Vue 的多页应用解决方案（二）
为什么需要使用 webpack 构建多页应用呢？因为某些项目使用 SPA 不太合适（大多是 SEO 的原因），或者您在做项目时有其他的需求。
###############
2018 年 11 月补充
彼时我对多页应用和 SEO 之间的关系存在误解，多页应用和 SEO 实际上没有必然的联系。要解决 SEO 的问题，最好通过 SSR（服务端渲染）和 CSR（客户端渲染）的配合，也叫做同构。
这几篇文章中没有介绍同构的知识，因此不必将 SEO 的问题代入。
###############
对我自己而言，前段时间需要对公司官网进行移动端改版，其实官网本身比较简单，PC 端的官网的接口调用和公共函数移动端完全可以使用，最多的改动就是样式了，完全可以使用 ES5 一路复制粘贴下去。但我也想尝试一点新东西，我想通过移动端官网这个项目做一些练手工作，我的需求大概如下：
- 使用 ES6 进行开发
- 期望使用面向对象开发（class）
- 自动压缩合并 CSS 和 JS 文件
- 使用 ESLint 进行代码检查
- 自动生成 HTML 文件
- 自动抽取 CSS 文件
- ···
有了这些需求，基本上就必须使用 webpack 了，于是又开始了一次采坑之旅。我将尽可能详细的将配置过程写出来，方便您进行参考，也方便自己日后查看。本脚手架是基于 webpack3 配置的。
安装依赖
首先是项目中需要使用的依赖安装。
1.安装 webpack 和 webpack-dev-server
npm install webpack webpack-dev-server --save-dev
2.安装 webpack-merge
npm install webpack-merge --save-dev
该插件用来对 webpack 配置进行合并操作。
3.安装 babel 相关插件
npm install babel-core babel-loader babel-preset-env --save-dev
这系列插件用来对 ES6 语法进行转换。
4.安装样式处理相关插件
npm install css-loader style-loader postcss-loader autoprefixer --save-dev
这系列插件用来处理 CSS 样式，其中 autoprefixer 是 postcss 的一个插件，用来自动给 CSS 样式添加前缀。
5.安装 file-loader
npm install file-loader --save-dev
该插件将在导入图片、字体等文件时发挥作用。
PS.您也可以安装 url-loader 以实现相同的作用：
npm install url-loader --save-dev
6.安装 ESLint 相关的插件
npm install eslint eslint-loader --save-dev
这些插件用来对 JavaScript 代码进行检查。
7.安装 html-webpack-plugin 插件
npm install html-webpack-plugin --save-dev
该插件用来自动生成 HTML 文件。
8.安装 extract-text-webpack-plugin 插件
npm install extract-text-webpack-plugin --save-dev
该插件用来将 CSS 抽取到独立的文件。
9.安装 clean-webpack-plugin 插件
npm install clean-webpack-plugin --save-dev
该插件用来对 dist 文件夹进行清理工作，每次打包时先清理之前的 dist 文件夹。
下面是这些安装了的所有依赖：
...
"devDependencies": {
"autoprefixer": "^7.1.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"eslint": "^4.6.1",
"eslint-loader": "^1.9.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0"
},
...
配置文件划分
使用 webpack 进行项目构建时，我们有不同的目的，因此最好将配置文件进行拆分，以适应不同的工作：
├─config
│ config.js
│ webpack.config.base.js
│ webpack.config.dev.js
│ webpack.config.lint.js
│ webpack.config.prod.js
│ webpack.config.js
下面是一些配置的说明：
- config.js：一些全局的配置，比如 HTML 文件的路径、publicPath 等
- webpack.config.base.js：最基础的配置文件
- webpack.config.dev.js：开发环境配置文件
- webpack.config.lint.js：使用 ESLint 代码检查时的配置文件
- webpack.config.prod.js：生产环境配置文件
- webpack.config.js：主配置文件，根据环境变量引用相应的环境的配置
这些配置文件之间是通过 webpack-merge 这个插件进行合并的。
配置多页应用的关键点
如何使用 webpack 配置多页面应用呢？实现多页面应用的关键点在哪里呢？首先需要简单看一下多页应用和单页应用功能的区别。
单页应用的特点：
- 只有一个入口页面（index.html）
- 这个单页页面（index.html）中需要引入打包后的所有 JavaScript 文件
- 所有的页面内容完全由 JavaScript 生成
- 单页应用有自己的路由系统，服务器端没有和路由对应的文件
- ···
多页应用的特点：
- 每个版块对应一个页面
- 每个页面需要对公共的 JavaScript 进行引入
- 每个页面还需要引入和其自身对应的 JavaScript 文件
- 由于对应了多个页面，因此不是所有页面内容都是由 JavaScript 生成的
- 没有自己的路由系统，服务器端有对应的静态文件
- ···
抛开生成页面内容和路由系统，我们可以看到单页应用和多页应用最大的区别就是：
- 单页应用需要在入口页面引入所有的 JavaScript 文件
- 多页应用需要在每个页面中引入公共的 JavaScript 文件以及其自身的 JavaScript 文件
由于 CSS 文件是可以由 extract-text-webpack-plugin 这个插件自动提取并插入到 HTML 页面的，因此我们只需要关心如何在 HTML 页面中引入 JavaScript 文件了。
webpack 在打包时，会将入口文件中的 JavaScript 文件打包到某个目标文件中，在不考虑代码分割提取的情况下，一个入口文件会打包为一个目标文件，多个入口文件会打包为多个对应的目标文件。
因此，我们可以将每个多页页面中的特有的 JavaScript 文件作为入口文件，在打包时将对应打包成不同的 bundle 文件（结果文件），如果你想要的话，还可以在打包时进行代码分割处理，将公用代码抽取成一个文件，然后在 HTML 中引入这些 JavaScript 文件就好了。
总结一下，使用 webpack 配置多页应用的关键点在于：
- 将每个页面中特有的 JavaScript 文件作为入口文件进行打包
- 在打包后，每个页面中都需要引入这些打包后的文件
- 您可以在打包时进行公用代码提取，然后在 HTML 文件中引入
说了这么多，其实就是利用了 webpack 多入口文件进行打包。
自动生成 HTML 页面
在使用 webpack 对 JavaScript 文件进行打包时，通常需要在打包的文件名中加一个 hash 字符串用来防止缓存，当我们修改了 JavaScript 代码后，打包后的文件名也会发生变化。此时如果手动在 HTML 中引用这些 JavaScript 文件，是非常麻烦的。
因此，我们期望能自动生成 HTML 文件，并自动引用打包后的 JavaScript 文件。所谓自动生成 HTML 文件，可以理解为将源代码的 HTML 复制到目标文件夹中，同时自动引用打包后的 JavaScript 文件。
要完成这项操作，就需要使用前面安装的 html-webpack-plugin 这个插件。
html-webpack-plugin 插件的使用
首先，在我的项目中，有这么一些 HTML 页面，将它们放在 html 文件夹中：
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2017/9/5 18:04 1071 company_intro.html
-a---- 2017/9/5 18:04 988 contact_us.html
-a---- 2017/9/5 18:04 1131 cooperate.html
-a---- 2017/9/5 18:04 1244 enterprise_culture.html
-a---- 2017/9/5 18:04 1011 hornors.html
-a---- 2017/9/5 18:04 1365 index.html
-a---- 2017/9/5 18:04 1769 investment.html
-a---- 2017/9/5 18:04 1005 join_us.html
-a---- 2017/9/5 18:04 1037 news_center.html
-a---- 2017/9/5 18:04 987 news_item.html
-a---- 2017/9/5 18:04 1134 operate.html
-a---- 2017/9/5 18:04 1255 product.html
-a---- 2017/9/5 18:04 1132 schools.html
然后，把这些 HTML 文件名（不要后缀）都写在 config.js 文件中，以供取用：
module.exports = {
HTMLDirs:[
"index",
"company_intro",
"enterprise_culture",
"hornors",
"news_center",
"news_item",
"product",
"schools",
"operate",
"cooperate",
"join_us",
"contact_us",
"investment"
],
}
HTMLDirs 是一个数组，其中保存了项目中会用到的所有 HTML 页面。
接下来，每个 HTML 页面都对应一份 JavaScript 代码，因此在 js 文件夹中建立对应的 JavaScript 文件：
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2017/9/5 18:04 2686 company_intro.js
-a---- 2017/9/5 18:04 594 contact_us.js
-a---- 2017/9/5 18:04 1725 cooperate.js
-a---- 2017/9/8 16:54 3505 enterprise_culture.js
-a---- 2017/9/5 18:04 2208 hornors.js
-a---- 2017/9/8 16:54 4491 index.js
-a---- 2017/9/5 18:04 3180 investment.js
-a---- 2017/9/5 18:04 1327 join_us.js
-a---- 2017/9/8 16:55 3689 news_center.js
-a---- 2017/9/5 18:04 1972 news_item.js
-a---- 2017/9/5 18:04 2728 operate.js
-a---- 2017/9/5 18:04 2664 product.js
-a---- 2017/9/5 18:04 2476 schools.js
这两项是必须的，只有提供了每个页面的 HTML 文件和对应的 JavaScript 文件，才能构建多页面应用。
同时，可能每个页面都有自己的样式，因此您也可以在 css 文件夹中建立一些样式文件：
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2017/9/5 18:04 419 company_intro.css
-a---- 2017/9/5 18:04 167 contact_us.css
-a---- 2017/9/5 18:04 214 cooperate.css
-a---- 2017/9/5 18:04 926 enterprise_culture.css
-a---- 2017/9/5 18:04 255 hornors.css
-a---- 2017/9/5 18:04 693 investment.css
-a---- 2017/9/5 18:04 136 join_us.css
-a---- 2017/9/5 18:04 541 news_center.css
-a---- 2017/9/5 18:04 623 news_item.css
-a---- 2017/9/5 18:04 342 operate.css
-a---- 2017/9/5 18:04 236 product.css
-a---- 2017/9/5 18:04 213 schools.css
关于建立样式这一项，不是必须的。
最后，我们就可以使用 html-webpack-plugin 这个插件来自动生成 HTML 文件了，html-webpack-plugin 插件的用法如下：
// 引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 引入多页面文件列表
const { HTMLDirs } = require("./config");
// 通过 html-webpack-plugin 生成的 HTML 集合
let HTMLPlugins = [];
// 入口文件集合
let Entries = {}
// 生成多页面的集合
HTMLDirs.forEach((page) => {
const htmlPlugin = new HTMLWebpackPlugin({
filename: `${page}.html`,
template: path.resolve(__dirname, `../app/html/${page}.html`),
chunks: [page, 'commons'],
});
HTMLPlugins.push(htmlPlugin);
Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);
})
在上面的代码中，首先引入了所需的插件和变量，然后利用 html-webpack-plugin 循环生成 HTML 页面。
简单说下 HTMLWebpackPlugin 构造函数的几个参数：
- filename：生成的 HTML 文件名，我这里选择和原始文件名保持一致
- template：生成 HTML 文件使用的模板，也就是我们之前在 html 文件夹中建立的那些文件
- chunks：生成 HTML 文件时会自动插入相应的代码片段（也就是 JavaScript 文件），我这里选择插入每个页面对应的 JavaScript 文件，以及最后提取出来的公共文件代码块。
关于 chunks 还需要说明一点，chunks 是一个数组，在生成 HTML 文件时会将数组中的对应的 JavaScript 片段自动插入到 HTML 中，这些片段也就是 webpack 打包时的 output 选项中的 [name]。这里只需要写上 [name] 值就行了，无需使用打包生成的完整名称，因为这会还没开始打包呢，打包后生成的名称咱也不知道。
最后，我们把这些生成 HTML 文件的配置插入到 HTMLPlugins 这个数组中，同时设置 webpack 的入口文件。
总结
本文主要谈到了使用 webpack 构建多页面应用的几个核心问题，虽然就是运用了 webpack 的多入口打包以及自动生成 HTML 的一个插件，但其中的缘由还是需要我们了解的。
本文只是一个粗略的介绍，没有涉及太多配置文件细节的内容，这部分内容会在下一篇文章介绍，此处限于篇幅就不再展开了。
完。