背景

跟着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