從前面幾節到現在，其實我們的項目結構是有問題的，因為我們直接把index.html文件放到了dist文件夾目錄下。這肯定是不正確的，應該放到我們src目錄下，然後打包到dist目錄下，前面為了學習，才把index.html放到了dist目錄下。

此節我們就來完成把開發環境中的html文件打包到我們的生產路徑下。

1.打包HTML文件

在開始下面內容之前，我們先改造一下之前的項目結構，先把dist中的index.html文件剪切到src目錄中，並去掉我們引入的js代碼（webpack會自動為我們引入js）,src才是我們真正工作的目錄文件結構。然後刪除之前手動創建的dist目錄。

看看目前的項目結構目錄：

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‘
        })

註釋：

• minify：是對html文件進行壓縮，removeAttrubuteQuotes是卻掉屬性的雙引號。

• hash：為了開發中js有緩存效果，所以加入hash，這樣可以有效避免緩存JS。

• template：是要打包的html模版路徑和文件名稱。

1.4 打包

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

1.5 啟動服務

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

訪問效果如下，其效果與之前一致。為此我們成功完成了htnl文件的打包發布工作。

總結：

html文件的打包可以有效的區分開發目錄和生產目錄，在webpack的配置中也要搞清楚哪些配置用於生產環境，哪些配置用於開發環境，避免兩種環境的配置沖突。

(7/24) 插件配置之html文件的打包發布