使用webpack構建多頁應用

IamDLY 發布于2019-08-23 16:50 / 3093人閱讀

摘要：然而在某些特殊的應用場景之中，則需要使用到傳統的多頁應用。在使用進行項目工程化構建時，也需要對應到調整。配置入口設置多頁應用的打包會對應多個入口文件，以及多個模版文件。方法一使用的文件系統。組合如下完整可查看多頁應用

背景

隨著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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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