使用webpack构建多页应用

背景

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

与SPA应用区别

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

webpack配置

入口设置

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

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

包括 page1page2 两个页面,以及它们所对应的 jsless 文件。那么在使用 webpack 构建项目时,就有 page1->index.jspage2->index.js 两个入口文件,以及 page1->index.htmlpage2->index.html 两个模版文件。然而在构建项目时,不可能针对每一个页面指定一个入口配置。\
要自动匹配到所有的页面入口及模版文件,有两种方法。\
\
方法一:使用 nodefs 文件系统。来读取父级文件夹下的所有子文件夹。通过文件夹名称,来自动匹配到所有的页面。然而,这种方式需要保持父级文件夹下文件的干净。否则就需要使用具体的判断逻辑来过滤出所有的入口目录。\
\
方法二:通过配置文件来配置入口。比如:

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 必须配置,如果不配置,会导致每个模版文件中均引入所有的 jscss 文件。指定为 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

相关推荐