使用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