背景
隨着react
, vue
, angular
三大前端框架在前端領域地位的穩固,PWA應用正在被應用到越來越多的項目之中。然而在某些特殊的應用場景之中,則需要使用到傳統的多頁應用。在使用webpack進行項目工程化構建時,也需要對應到調整。
與PWA應用區別
在PWA應用中,使用 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的配置和PWA應用一致,不需要特殊配置。
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
的配置組合起來,除此之外的其它配置,跟PWA應用一致,無需做單獨處理。組合如下
modules.exports = {
entry: { ...entryData },
output: {
filename: 'public/[name]_[chunkhash:8].js',
path: path.join(__dirname, `../dist/`),
publicPath: '/'
},
plugins: [
...HtmlWebpackPluginData
]
...
}
完整demo可查看多頁應用demo