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

從前面幾節到如今，其實咱們的項目結構是有問題的，由於咱們直接把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/ 進行訪問。

訪問效果以下，其效果與以前一致。爲此咱們成功完成了html文件的打包發佈工做。

總結：

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