使用 webpack3 配置多页应用（一）

在本系列文章的基础上，我对脚手架配置进行了一些优化整理，基于 Webpack4 和 Vue，下面是文章链接：
基于 Webpack4 + Vue 的多页应用解决方案（一）
基于 Webpack4 + Vue 的多页应用解决方案（二）

为什么需要使用 webpack 构建多页应用呢？因为某些项目使用 SPA 不太合适（大多是 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 的一个插件，但其中的缘由还是需要我们了解的。
本文只是一个粗略的介绍，没有涉及太多配置文件细节的内容，这部分内容会在下一篇文章介绍，此处限于篇幅就不再展开了。

完。

作者：黑黢黢
链接：https://www.jianshu.com/p/2cc4a1078953