1. 寫在前面
如果你熟悉Vue或者React的話，那么你肯定知道使用這些框架創(chuàng)建的應(yīng)用屬于 單頁面應(yīng)用 。這些框架底層使用的就是Webpack來構(gòu)建項目，通過對項目文件進行打包編譯，最終生成一個 .html 文件亩冬，所以我們說這些應(yīng)用屬于 單頁面應(yīng)用于樟。
但是在使用webpack進行構(gòu)建項目的時候公条，不僅可以構(gòu)建單頁面應(yīng)用，還可以構(gòu)建多頁面應(yīng)用迂曲。
在實際的項目中靶橱，如果該項目初期使用的就是 腳手架（比如Vue腳手架或者React腳手架） 搭建起來的，那么該項目大多是單頁面應(yīng)用路捧。
但是如果項目在前期不是使用 腳手架 搭建起來的关霸，比如使用 jQuery 庫來開發(fā)的。但是后期有幾個大的業(yè)務(wù)邏輯杰扫，需要使用 Vue腳手架 或者是 React腳手架 來開發(fā)队寇，這個時候可能就需要使用Webpack來構(gòu)建多頁面應(yīng)用，每一個大的業(yè)務(wù)邏輯對應(yīng)一個單頁面應(yīng)用章姓。
所以在這篇博客中佳遣，我就來跟大家介紹一下如何使用Webpak，構(gòu)建多頁面應(yīng)用啤覆。主要內(nèi)容包括：
- 如何通過打包編譯苍日，生成不同的 .js 文件
- 如何在 .html 文件中，引入指定的 .js 文件
2. 如何通過打包編譯窗声，生成不同的 .js 文件
如果你看過我之前的博客相恃，那么你就會知道在 webpack.config.js 文件中，有以下的配置：
module.exports = {
entry: "./src/index.js", // 打包的入口文件笨觅，默認(rèn)是src目錄下的index.js文件
output: { // 配置文件默認(rèn)是dist目錄下的main.js文件
filename: "index.js", // 出口文件的文件名
path: path.resolve(__dirname, "build"), //出口文件的路徑拦耐，注意一定要是絕對路徑
}
}
通過以上的配置，webpack就可以找到項目的入口文件（./src/index.js）來對項目進行打包編譯见剩，最終生成的就是一個單頁面應(yīng)用杀糯。這就給我們提供一個思路：如果我們想要使用webpack打包編譯，生成多頁面應(yīng)用苍苞，也要通過修改這兩個配置屬性來完成固翰。
想要構(gòu)建多頁面應(yīng)用，配置方式非常簡單羹呵，這里直接給出配置代碼骂际，然后再作出解釋：
module.exports = {
entry: { // 指定入口文件
'home': "./src/index.js",
'other': "./src/other.js"
},
output: { // 配置文件默認(rèn)是dist目錄下的main.js文件
filename: "[name].js", // 出口文件的文件名
path: path.resolve(__dirname, "build"), //出口文件的路徑，注意一定要是絕對路徑
},
}
通過上面的代碼冈欢，我們可以看到歉铝，entry 屬性的值由字符串變?yōu)榱藢ο蟆Ｔ谠搶ο笾写粘埽覀兣渲昧藘蓚€屬性太示，這就表明柠贤，我們準(zhǔn)備使用webpack來構(gòu)建 兩個 單頁面應(yīng)用，分別是 home 應(yīng)用和 other 應(yīng)用类缤。他們都有一個對應(yīng)的入口文件臼勉，webpack在打包編譯的時候，就是從他們的入口文件觸發(fā)呀非，分別構(gòu)建對應(yīng)的單頁面應(yīng)用坚俗。
同時我們還修改了 output.filename 這個屬性，不再是固定的 index.js岸裙，而是 [name].js 。這樣就可以通過 entry對象 的兩個屬性（即home和other）來動態(tài)生成對應(yīng)的 .js 文件速缆。
現(xiàn)在你可以在 src文件夾 下創(chuàng)建兩個入口文件 index.js 和 other.js 降允，在里面寫對應(yīng)的代碼，然后執(zhí)行webpack的 build 命令艺糜，就可以進行打包編譯剧董，最終會生成兩個文件，即 index.js 和 other.js 破停，到這一步多頁面應(yīng)用的 .js 文件已經(jīng)構(gòu)建完成了翅楼。
3. 如何在 .html 文件中，引入指定的 .js 文件
現(xiàn)在多頁面應(yīng)用的 .js 文件已經(jīng)構(gòu)建完成真慢，但是我們還需要在 .html 文件中引入 .js 文件毅臊，多頁面應(yīng)用才算是正式完成，所以這一節(jié)我們介紹如何在 .html 文件中引入 .js 文件黑界。
想要達(dá)到這個目的管嬉，我們需要解除 html-webpack-plugin 這一插件的幫助，首先執(zhí)行以下代碼進行安裝：
yarn add html-webpack-plugin -D
安裝完成之后朗鸠，到 webpack.config.js 文件中做以下配置：
let HtmlWebpackPlugin = requier('html-webpack-plugin')
module.exports = {
/* 節(jié)省篇幅蚯撩，其余配置已省略 */
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'home.html',
chunks: ['home']
}),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'other.html',
chunks: ['other']
// chunks: ['other', 'home'] // 也可以引入多個 .js 文件
}),
]
}
這里將其他的配置規(guī)則省略了，如果你想看其他的配置規(guī)則烛占，可以查看我的 GitHub倉庫 - webpack-learning ,或者通過本文末尾的鏈接胎挎，跳轉(zhuǎn)到我之前的博客中進行查看。
因為我們這里構(gòu)建的是兩個單頁面應(yīng)用忆家，所以這里要創(chuàng)建兩個 HtmlWebpackPlugin 對象犹菇，在每個對象中，都有三個屬性弦赖，這里一一對這些屬性做出解釋：
-
template: 這是模板文件项栏，webpack會在這個文件中，通過
<script src=""></script>標(biāo)簽引入打包編譯生成的 .js 文件蹬竖，生成最終的 .html 頁面文件沼沈。 - filename: 在模板文件中引入 .js 文件流酬，會生成一個新的 .html 文件，通過 filename 屬性列另，可以指定生成的 .html 文件的名稱芽腾。
- chunks: 現(xiàn)在模板文件和打包編譯的 .js 文件都已經(jīng)有了，但是要在模板文件中引入哪些 .js 文件呢页衙？可以通過 chunks 屬性來指定摊滔。我們可以通過數(shù)組的形式，指定一個或多個 .js 文件店乐，這樣就可以在模板文件中引入一個或多個 .js 文件艰躺。
有了上面的配置，現(xiàn)在執(zhí)行webpack的 build 命令眨八，就可以進行打包編譯腺兴，最終最終會生成 home.html 和 other.html 兩個文件，也就是兩個單頁面應(yīng)用廉侧。如此一來页响，我們就使用webpack成功構(gòu)建了多頁面應(yīng)用。
4. 寫在最后
到此為止段誊，我們?nèi)绾问褂脀ebpack構(gòu)建多頁面應(yīng)用闰蚕，并且生成了對應(yīng)的 .html 文件，現(xiàn)在到項目中连舍，使用這些 .html 文件没陡，就可以使用我們開發(fā)的應(yīng)用了。
