使用webpack构建多页应用

背景

随着react, vue, angular 三大前端框架在前端领域地位的稳固，SPA应用正在被应用到愈来愈多的项目之中。然而在某些特殊的应用场景之中，则须要使用到传统的多页应用。在使用webpack进行项目工程化构建时，也须要对应到调整。

与SPA应用区别

在SPA应用中，使用 webpack 构建完成项目以后，会生成一个 html 文件，若干个 js 文件，以及若干个 css 文件。在 html 文件中，会引用全部的 js 和 css 文件。\
而在多页应用中，使用 webpack 构建完成项目以后，会生成多个 html 文件，多个 js 文件，以及多个 css 文件。在每一个 html 文件中，只会引用该页面所对应的 js 和 css 文件。

webpack配置

入口设置

多页应用的打包会对应多个入口 js 文件，以及多个 html 模版文件。假设咱们的开发状态下的多页目录是这样：

|--page1
        |--index.html
        |--index.js
        |--index.less
    |--page2
        |--index.html
        |--index.js
        |--index.less

包括 page1 和 page2 两个页面，以及它们所对应的 js 和 less 文件。那么在使用 webpack 构建项目时，就有 page1->index.js 和 page2->index.js 两个入口文件，以及 page1->index.html 和 page2->index.html 两个模版文件。然而在构建项目时，不可能针对每个页面指定一个入口配置。\
要自动匹配到全部的页面入口及模版文件，有两种方法。\
\
方法一：使用 node 的 fs 文件系统。来读取父级文件夹下的全部子文件夹。经过文件夹名称，来自动匹配到全部的页面。然而，这种方式须要保持父级文件夹下文件的干净。不然就须要使用具体的判断逻辑来过滤出全部的入口目录。\
\
方法二：经过配置文件来配置入口。好比：

entry: ['page1', 'page2'];

这样便能准确的指定出全部的入口目录。然而却在每次增长页面时，都须要去更改配置文件。\
两种方法个有特色，可根据具体状况选择。

具体配置

entry

entry的配置须要根据咱们获取到的入口数据来循环添加。

const entryData = {};
    entry.forEach(function (item) {
        entryData[item] = path.join(__dirname, `../src/pages/${item}/index.js`);
    })

output

output的配置和SPA应用一致，不须要特殊配置。

output: {
        filename: 'public/[name]_[chunkhash:8].js',
        path: path.join(__dirname, `../dist/`),
        publicPath: '/'
    },

HtmlWebpackPlugin

在使用 webpack 构建时。须要使用到 html-webpack-plugin 插件来生成项目模版。对于须要生成多个模版的多页应用来讲，也须要生成多个 html 模版文件。一样的，使用获取到的入口文件数据来循环添加。

const HtmlWebpackPlugin = require('html-webpack-plugin');
    const HtmlWebpackPluginData = [];
    entry.forEach(function (item) {
        HtmlWebpackPluginData.push(
            new HtmlWebpackPlugin({
                filename: `${item}.html`,
                template: path.join(__dirname, `../src/pages/${item}/index.html`),
                chunks: [item]
            })
        );
    })

配置中 chunks 必须配置，若是不配置，会致使每一个模版文件中均引入全部的 js 和 css 文件。指定为 entry 中的配置 name，则会只引入该入口相关的文件。

配置组合

接下来，即是将前面的entry, output, htmlWebpackPlugin的配置组合起来，除此以外的其它配置，跟SPA应用一致，无需作单独处理。组合以下

modules.exports = {
        entry: { ...entryData },
        output: {
            filename: 'public/[name]_[chunkhash:8].js',
            path: path.join(__dirname, `../dist/`),
            publicPath: '/'
        },
        plugins: [
            ...HtmlWebpackPluginData
        ]
        ...
    }

完整demo可查看多页应用demo