使用Webpack構建多頁面程式

2021-10-22 07:33:10 字數 2843 閱讀 5768

使用webpack搭建單頁面程式十分常見,但在實際開發中我們可能還會有開發多頁面程式的需求,因此我研究了一下如何使用webpack搭建多頁面程式。

將每個頁面所在的資料夾都看作是乙個單獨的單頁面程式目錄,配置多個entry以及html-webpack-plugin即可實現多頁面打包。

下面為本專案目錄結構

.

├─ src

│ └─ pages

│ ├─ about

│ │ ├─ index.css

│ │ ├─ index.html

│ │ └─ index.js

│ └─ index

│ ├─ index.css

│ ├─ index.html

│ └─ index.js

└─ webpack.config.js

首先我們來看一下單頁面程式的 webpack 基礎配置

const htmlwebpackplugin =

require

('html-webpack-plugin');

module.exports =),

],output:,}

;

要想將其改為多頁面程式,就要將它的單入口和單 html 模板改為多入口和多 html 模板

傳統的多入口寫法可以寫成鍵值對的形式

module.exports =

,...

}

這樣寫的話,每增加乙個頁面就需要手動新增乙個入口,比較麻煩,因此我們可以定義乙個根據目錄生成入口的函式來簡化我們的操作

const glob =

require

('glob');

function

getentry()

; glob.

sync

('./src/pages/**/index.js').

foreach

((file)

=>);

return entry;

}module.exports =

在輸出的配置項中,再將輸出的檔名寫死顯示已經不合適了,因此我們要將名字改為與原始檔相匹配的名字

module.exports =

,...

}

與入口相同,可以將不同的 html 模板直接寫入外掛程式配置中,這裡我們需要為每個外掛程式配置不同的chunks,防止 js 注入到錯誤的 html 中

const htmlwebpackplugin =

require

('html-webpack-plugin');

module.exports =),

newhtmlwebpackplugin()

,],...

};

這樣的做法與入口有著同樣的毛病,因此我們再定義乙個函式來生成這個配置

const htmlwebpackplugin =

require

('html-webpack-plugin');

const glob =

require

('glob');

function

gethtmltemplate()

;}).

map(

(template)

=>

newhtmlwebpackplugin

(.html`,}

));}

module.exports =

;

這樣乙個簡單的多頁面專案就配置完成了,我們還可以在此基礎上新增熱更新、**分割等功能,有興趣的可以自己嘗試一下

// webpack.config.js

const path =

require

('path');

const htmlwebpackplugin =

require

('html-webpack-plugin');

const glob =

require

('glob');

const

=require

('clean-webpack-plugin');

// 多頁入口

function

getentry()

; glob.

sync

('./src/pages/**/index.js').

foreach

((file)

=>);

return entry;

}// 多頁模板

function

gethtmltemplate()

;}).

map(

(template)

=>

newhtmlwebpackplugin

(.html`,}

));}

const config =

, module:,]

,}, plugins:

[new

cleanwebpackplugin()

,...

gethtmltemplate()

],devserver:,}

;module.exports = config;

webpack 構建多頁面應用

如何使用webpack構建多頁面應用,這是乙個我一直在想和解決的問題。網上也給出了很多的例子,很多想法。猛一看,覺得有那麼點兒意思,但仔細看也就那樣。使用webpack這個構建工具,可以使我們少考慮很多的問題。我們常見的單頁面應用只有乙個頁面,它考慮問題,解決問題圍繞著中心化去解決,因此很多麻煩都迎...

webpack多頁面方案

參考文章比較多 react loadable import 這個方案需要 babel plugin syntax dynamic import的支援,記得修改babelrc。一般用這個方案的話是要用react router來寫乙個單頁應用,模板載入乙個入口js,入口js裡把頁面路由寫好,每個頁面作為...

webpack多頁面打包

在src下新建多個js檔案和html模板 在entry裡配置多個入口檔案 entry htmlwebpackplugin裡配置不同的html頁面引用不同的js檔案 const plugins new htmlwebpackplugin new htmlwebpackplugin 但是每次在 entr...