從前面幾節(jié)到現(xiàn)在，其實(shí)我們的項(xiàng)目結(jié)構(gòu)是有問題的，因?yàn)槲覀冎苯影?code>index.html文件放到了dist文件夾目錄下。這肯定是不正確的奶赠，應(yīng)該放到我們src目錄下，然后打包到dist目錄下药有，前面為了學(xué)習(xí)毅戈，才把index.html放到了dist目錄下。
此節(jié)我們就來完成把開發(fā)環(huán)境中的html文件打包到我們的生產(chǎn)路徑下愤惰。
1.打包HTML文件
步驟.png
在開始下面內(nèi)容之前苇经，我們先改造一下之前的項(xiàng)目結(jié)構(gòu)，先把
dist中的index.html文件剪切到src目錄中宦言，并去掉我們引入的js代碼（webpack會(huì)自動(dòng)為我們引入js）,src才是我們真正工作的目錄文件結(jié)構(gòu)扇单。然后刪除之前手動(dòng)創(chuàng)建的dist目錄。看看目前的項(xiàng)目結(jié)構(gòu)目錄：
目前的項(xiàng)目結(jié)構(gòu)目錄.png
1.1 安裝html-webpack-plugin插件
npm install --save-dev html-webpack-plugin
1.2 引入html-webpack-plugin插件
在webpack.config.js文件中奠旺，引入html-webpack-plugin插件：
const htmlPlugin= require('html-webpack-plugin')
1.3 插件配置
在webpack.config.js里的plugins里進(jìn)行插件配置蜘澜，配置代碼如下：
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
})
注釋：
1.minify：是對(duì)html文件進(jìn)行壓縮，removeAttrubuteQuotes是卻掉屬性的雙引號(hào)响疚。
2.hash：為了開發(fā)中js有緩存效果鄙信，所以加入hash，這樣可以有效避免緩存js忿晕。
3.template：是要打包的html模版路徑和文件名稱装诡。
1.4 打包
上邊的都配置完成后，我們就可以在終端中使用webpack命令践盼，進(jìn)行打包鸦采。結(jié)果index.html文件被打包到我們的dist目錄下了，并且自動(dòng)引入了入口的js文件咕幻。
打包后的文件目錄.png
1.5 啟動(dòng)服務(wù)
在終端中執(zhí)行npm run server命令渔伯，此時(shí)我們可以看到服務(wù)能正常啟動(dòng)，而不是像上一節(jié)中會(huì)出現(xiàn)沖突肄程。我們可以通過 http://localhost:1818/ 進(jìn)行訪問锣吼。
啟動(dòng)服務(wù).png
訪問效果如下，其效果與之前一致绷耍。為此我們成功完成了html文件的打包發(fā)布工作。
訪問效果e.png
總結(jié)：
html文件的打包可以有效的區(qū)分開發(fā)目錄和生產(chǎn)目錄鲜侥，在webpack的配置中也要搞清楚哪些配置用于生產(chǎn)環(huán)境褂始，哪些配置用于開發(fā)環(huán)境，避免兩種環(huán)境的配置沖突描函。
