資訊專欄INFORMATION COLUMN
摘要：然而在某些特殊的應(yīng)用場景之中，則需要使用到傳統(tǒng)的多頁應(yīng)用。在使用進(jìn)行項(xiàng)目工程化構(gòu)建時(shí)，也需要對應(yīng)到調(diào)整。配置入口設(shè)置多頁應(yīng)用的打包會(huì)對應(yīng)多個(gè)入口文件，以及多個(gè)模版文件。方法一使用的文件系統(tǒng)。組合如下完整可查看多頁應(yīng)用
背景
隨著react, vue, angular 三大前端框架在前端領(lǐng)域地位的穩(wěn)固，SPA應(yīng)用正在被應(yīng)用到越來越多的項(xiàng)目之中。然而在某些特殊的應(yīng)用場景之中，則需要使用到傳統(tǒng)的多頁應(yīng)用。在使用webpack進(jìn)行項(xiàng)目工程化構(gòu)建時(shí)，也需要對應(yīng)到調(diào)整。
與SPA應(yīng)用區(qū)別在SPA應(yīng)用中，使用 webpack 構(gòu)建完成項(xiàng)目之后，會(huì)生成一個(gè) html 文件，若干個(gè) js 文件，以及若干個(gè) css 文件。在 html 文件中，會(huì)引用所有的 js 和 css 文件。
而在多頁應(yīng)用中，使用 webpack 構(gòu)建完成項(xiàng)目之后，會(huì)生成多個(gè) html 文件，多個(gè) js 文件，以及多個(gè) css 文件。在每個(gè) html 文件中，只會(huì)引用該頁面所對應(yīng)的 js 和 css 文件。
多頁應(yīng)用的打包會(huì)對應(yīng)多個(gè)入口 js 文件，以及多個(gè) html 模版文件。假設(shè)我們的開發(fā)狀態(tài)下的多頁目錄是這樣：
|--page1
|--index.html
|--index.js
|--index.less
|--page2
|--index.html
|--index.js
|--index.less
包括 page1 和 page2 兩個(gè)頁面，以及它們所對應(yīng)的 js 和 less 文件。那么在使用 webpack 構(gòu)建項(xiàng)目時(shí)，就有 page1->index.js 和 page2->index.js 兩個(gè)入口文件，以及 page1->index.html 和 page2->index.html 兩個(gè)模版文件。然而在構(gòu)建項(xiàng)目時(shí)，不可能針對每一個(gè)頁面指定一個(gè)入口配置。
要自動(dòng)匹配到所有的頁面入口及模版文件，有兩種方法。
方法一：使用 node 的 fs 文件系統(tǒng)。來讀取父級(jí)文件夾下的所有子文件夾。通過文件夾名稱，來自動(dòng)匹配到所有的頁面。然而，這種方式需要保持父級(jí)文件夾下文件的干凈。否則就需要使用具體的判斷邏輯來過濾出所有的入口目錄。
方法二：通過配置文件來配置入口。比如：
entry: ["page1", "page2"];
這樣便能準(zhǔn)確的指定出所有的入口目錄。然而卻在每次增加頁面時(shí)，都需要去更改配置文件。
兩種方法個(gè)有特點(diǎn)，可根據(jù)具體情況選擇。
entry的配置需要根據(jù)我們獲取到的入口數(shù)據(jù)來循環(huán)添加。
const entryData = {};
entry.forEach(function (item) {
entryData[item] = path.join(__dirname, `../src/pages/${item}/index.js`);
})
output的配置和SPA應(yīng)用一致，不需要特殊配置。
output: {
filename: "public/[name]_[chunkhash:8].js",
path: path.join(__dirname, `../dist/`),
publicPath: "/"
},
在使用 webpack 構(gòu)建時(shí)。需要使用到 html-webpack-plugin 插件來生成項(xiàng)目模版。對于需要生成多個(gè)模版的多頁應(yīng)用來說，也需要生成多個(gè) html 模版文件。同樣的，使用獲取到的入口文件數(shù)據(jù)來循環(huán)添加。
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 必須配置，如果不配置，會(huì)導(dǎo)致每個(gè)模版文件中均引入所有的 js 和 css 文件。指定為 entry 中的配置 name，則會(huì)只引入該入口相關(guān)的文件。
配置組合接下來，便是將前面的entry, output, htmlWebpackPlugin的配置組合起來，除此之外的其它配置，跟SPA應(yīng)用一致，無需做多帶帶處理。組合如下
modules.exports = {
entry: { ...entryData },
output: {
filename: "public/[name]_[chunkhash:8].js",
path: path.join(__dirname, `../dist/`),
publicPath: "/"
},
plugins: [
...HtmlWebpackPluginData
]
...
}
完整demo可查看多頁應(yīng)用demo
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103370.html
摘要：原文地址如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里前言上文多頁應(yīng)用架構(gòu)系列十二利用生成普通網(wǎng)頁頁面模板我們基本上已經(jīng)搞清楚如何利用來生成普通網(wǎng)頁頁面模板，本文將以我的腳手架項(xiàng)目介紹如何在這基礎(chǔ)上搭建一套簡單的模板布局系統(tǒng)。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000007...
摘要：構(gòu)建的基于的多頁應(yīng)用腳手架，本文聊聊本次項(xiàng)目中構(gòu)建多頁應(yīng)用的一些心得體會(huì)。倉庫構(gòu)建的舊版多頁應(yīng)用構(gòu)建的多頁應(yīng)用。例如多頁應(yīng)用中每個(gè)的值對應(yīng)的文件。Webpack構(gòu)建的基于zepto的多頁應(yīng)用腳手架，本文聊聊本次項(xiàng)目中Webpack構(gòu)建多頁應(yīng)用的一些心得體會(huì)。 1.前言 由于公司舊版的腳手架是基于Gulp構(gòu)建的zepto多頁應(yīng)用（有興趣可以看看web-mobile-cli），有著不少的痛點(diǎn)。例...
摘要：回到純靜態(tài)頁面開發(fā)階段，讓頁面不需要后端渲染也能跑起來。改造開始本文著重介紹如何將靜態(tài)頁面改造成后端渲染需要的模板?？偨Y(jié)在后端渲染的項(xiàng)目里使用多頁應(yīng)用架構(gòu)是絕對可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000820338...
摘要：回到純靜態(tài)頁面開發(fā)階段，讓頁面不需要后端渲染也能跑起來。改造開始本文著重介紹如何將靜態(tài)頁面改造成后端渲染需要的模板?？偨Y(jié)在后端渲染的項(xiàng)目里使用多頁應(yīng)用架構(gòu)是絕對可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000820338...
摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里這系列文章講什么本系列文章主要介紹如何用這一當(dāng)前流行的構(gòu)建工具來設(shè)計(jì)一個(gè)多頁應(yīng)用的架構(gòu)。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000006843916如果您對本系列文章...
閱讀 1094·2023-04-26 02:02
閱讀 2438·2021-09-26 10:11
閱讀 3585·2019-08-30 13:10
閱讀 3779·2019-08-29 17:12
閱讀 750·2019-08-29 14:20
閱讀 2216·2019-08-28 18:19
閱讀 2262·2019-08-26 13:52
閱讀 983·2019-08-26 13:43
