使用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...