众里千寻

尽管我们通常都会用 Webpack 来构建单页应用，其实 Webpack 也可以构建多页面应用。方法与前面设置构建输出目标一章中输出多个文件类似，我们通过配置 MiniHtmlWebpackPlugin 这个插件来完成。

生成多个页面

我们通过 mini-html-webpack-plugin 这个插件来生成多个页面。html-webpack-plugin 也可以实现功能，并且我们还可以实现更细粒度的控制。本文只做演示说明，mini-html-webpack-plugin 足够使用了。

通常一个页面中需要指定标题、文件地址和要加载的构建模块（chunk）。配置如下：

webpack.parts.js

const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');

exports.page = ({ title, url = '', chunks } = {}) => ({
  plugins: [
    new MiniHtmlWebpackPlugin({
      publicPath: '/',
      chunks,
      filename: `${url && url + '/'}index.html`,
      context: { title },
    }),
  ],
});
1
2
3
4
5
6
7
8
9
10
11
12

我们使用新的配置文件

webpack.multi.js

const { merge } = require('webpack-merge');
const parts = require('./webpack.parts');

module.exports = merge(
  { mode: 'production', entry: { app: './src/multi.js' } },
  parts.page({ title: 'Demo' }),
  parts.page({ title: 'Another', url: 'another' })
);
1
2
3
4
5
6
7
8

编写一个小模块来渲染页面：

src/multi.js

const element = document.createElement('div');
element.innerHTML = 'hello multi';
document.body.appendChild(element);
1
2
3

package.json

{
  "scripts": {
    "build:multi": "wp --config webpack.multi.js"
  }
}
1
2
3
4
5

测试构建结果

执行完构建脚本以后，执行 npx serve dist，我们可以看到 / 和 /another 这两个页面。

我们可以通过 parts.page 的 chunks 参数来控制页面可以加载哪些模块。如果传 []，则页面不会加载任何 模块。该参数同时还支持使用前面 Bundle Splitingopen in new window 一章中分割出来的 bundle，方便我们复用像 vendor 这样的 bundle。

渐进式 web 应用（PWA）

如果我们在构建多页应用的时候，考虑一些代码复用和路由的问题，最终我们的应用会慢慢靠近 PWA。webpack-pwdopen in new window 这个官方例子展示了如何使用 Webpack 来构建 PWA 应用。

使用 Service Workeropen in new window 可以提升应用离线使用体验，Workboxopen in new window 及相关的 webpack-workbox-pluginopen in new window 可以帮助我们方便使用 Service Worker.

总结

我们可以通过使用多个进行并行编译的形式来生成多个页面，但是这么做可能无法复用公共代码。

我们可以将构建多个页面的配置放到一个配置文件中。通过 MiniHtmlWebpackPlugin 这个插件来构建多个页面。

我们可以通过各种 Webpack 技术来构建 PWA 应用，帮助我们提升应用的性能和使用体验。

关注微信公众号，获取最新推送~

加微信，深入交流~