使用webpack构建多页应用

IamDLY 发布于2019-08-23 16:50 / 3091人阅读

摘要：然而在某些特殊的应用场景之中，则需要使用到传统的多页应用。在使用进行项目工程化构建时，也需要对应到调整。配置入口设置多页应用的打包会对应多个入口文件，以及多个模版文件。方法一使用的文件系统。组合如下完整可查看多页应用

背景

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

云服务器 GPU云服务器构建多页应用多页应用 webpack使用 webpack 使用公用cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103370.html

webpack多页应用架构系列（十三）：构建一个简单的模板布局系统

摘要：原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言上文多页应用架构系列十二利用生成普通网页页面模板我们基本上已经搞清楚如何利用来生成普通网页页面模板，本文将以我的脚手架项目介绍如何在这基础上搭建一套简单的模板布局系统。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007...

yedf 2019-08-20 11:36 评论0 收藏0
Webpack构建多页应用心得体会

摘要：构建的基于的多页应用脚手架，本文聊聊本次项目中构建多页应用的一些心得体会。仓库构建的旧版多页应用构建的多页应用。例如多页应用中每个的值对应的文件。Webpack构建的基于zepto的多页应用脚手架，本文聊聊本次项目中Webpack构建多页应用的一些心得体会。 1.前言由于公司旧版的脚手架是基于Gulp构建的zepto多页应用（有兴趣可以看看web-mobile-cli），有着不少的痛点。例...

Ethan815 2019-05-22 19:15 评论0 收藏0
webpack多页应用架构系列（十五）：论前端如何在后端渲染开发模式下夹缝生存

摘要：回到纯静态页面开发阶段，让页面不需要后端渲染也能跑起来。改造开始本文着重介绍如何将静态页面改造成后端渲染需要的模板。总结在后端渲染的项目里使用多页应用架构是绝对可行的，可不要给老顽固们吓唬得又回到传统前端架构了。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000820338...

dinfer 2019-07-01 12:21 评论0 收藏0
webpack多页应用架构系列（十五）：论前端如何在后端渲染开发模式下夹缝生存

摘要：回到纯静态页面开发阶段，让页面不需要后端渲染也能跑起来。改造开始本文着重介绍如何将静态页面改造成后端渲染需要的模板。总结在后端渲染的项目里使用多页应用架构是绝对可行的，可不要给老顽固们吓唬得又回到传统前端架构了。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000820338...

dingda 2019-08-20 13:57 评论0 收藏0
webpack多页应用架构系列（一）：一步一步解决架构痛点

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里这系列文章讲什么本系列文章主要介绍如何用这一当前流行的构建工具来设计一个多页应用的架构。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006843916如果您对本系列文章...

Lowky 2019-08-20 10:50 评论0 收藏0