這篇文章帶給大家的內容是關於使用webpack建立多頁應用程式的程式碼範例，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
背景：隨著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的配置需要根據我們取得到的入口資料來循環新增。
const entryData = {};
entry.forEach(function (item) {
entryData[item] = path.join(__dirname, `../src/pages/${item}/index.js`);
})output的設定和SPA應用程式一致，不需要特殊設定。
output: {
filename: 'public/[name]_[chunkhash:8].js',
path: path.join(__dirname, `../dist/`),
publicPath: '/'
},在使用 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
#以上是使用webpack建立多頁應用程式的程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
