和傳統(tǒng)的單頁面應(yīng)用打包不同，多頁面應(yīng)用其實就是配置多個入口，生成多個bundle。
下面就來看看具體應(yīng)該怎么操作吧
image.png
這是官方提供的示例，可以看到，entry變成了一個對象，而里面每一個鍵值對則就對應(yīng)了我們每一個最終生成的bundle。文檔地址：https://www.webpackjs.com/concepts/entry-points/#separate-app-and-vendor-entries
其實還是非常簡單的，原理上來說就是配置多個入口文件，使webpack生成多個依賴關(guān)系，從而構(gòu)建出多個bundlejs。這樣我們在不同的html文件引入對應(yīng)的bundle就行了。
但是有一個問題，這樣的配置我們每增加一個子頁面都需要去寫一個entry的鍵值對，非常的麻煩。那有沒有什么辦法可以一次性獲取到這些子頁面然后自動生成entry呢？
答案是有的，借助glob這個庫就可以完成。
glob這個庫有個sync的方法，可以獲取指定路徑下的所有文件，有了這個我們不就可以一次性拿到所有的子頁面了嘛。下面一起來看看具體操作吧
首先下載以下這個庫
npm i glob -D
const setMPA = ()=>{
const entry = {}
const htmlWebpackPlugin = []
const entryFile = glob.sync('./pages/*/main.js')
entryFile.forEach((filePath,index)=>{
//根據(jù)獲取到的路勁生成多入口entry對象
const entryName = filePath.split('/pages/')[1].split('/main.js')[0]
entry[entryName] = filePath
//接著生成每個入口的html模板
htmlWebpackPlugin.push(
new HtmlWebpackPlugin({
filename: `${entryName}.html`,
template: path.resolve(__dirname,`./pages/${entryName}/public/index.html`),
chunks: [entryName], //只打入指定的chunks，不然的話webpack會將所有bundle都引入
inject: true,//配置所有js資源放置在html得哪個位置
minify:{
//壓縮配置
collapseWhitespace: true,
preserveLineBreaks:false,
html5:true,
minifyCSS:true,
minifyJS:true,
removeComments: true,
}
})
)
})
return{
entry,
htmlWebpackPlugin
}
}
有了這個函數(shù)，就能拿到最新的entry以及最新的htmlWebpackPlugin配置。
目錄結(jié)構(gòu)如下
image.png
下面來看看效果
image.png
image.png
