從前面幾節(jié)到現(xiàn)在，其實我們的項目結構是有問題的，因為我們直接把index.html文件放到了dist文件夾目錄下。這肯定是不正確的，應該放到我們src目錄下，然后打包到dist目錄下，前面為了學習，才把index.html放到了dist目錄下。
此節(jié)我們就來完成把開發(fā)環(huán)境中的html文件打包到我們的生產(chǎn)路徑下。

1.打包HTML文件

步驟.png

目前的項目結構目錄.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里進行插件配置，配置代碼如下：

new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'./src/index.html'
        })

注釋：
1.minify：是對html文件進行壓縮，removeAttrubuteQuotes是卻掉屬性的雙引號。
2.hash：為了開發(fā)中js有緩存效果，所以加入hash，這樣可以有效避免緩存js。
3.template：是要打包的html模版路徑和文件名稱。

1.4 打包

上邊的都配置完成后，我們就可以在終端中使用webpack命令，進行打包。結果index.html文件被打包到我們的dist目錄下了，并且自動引入了入口的js文件。

打包后的文件目錄.png

1.5 啟動服務

在終端中執(zhí)行npm run server命令，此時我們可以看到服務能正常啟動，而不是像上一節(jié)中會出現(xiàn)沖突。我們可以通過 http://localhost:1818/ 進行訪問。

啟動服務.png

訪問效果e.png