webpack插件之htmlWebpackPlugin

webpack插件  自動化  htmlWebpackPlugin 

由於webpack已經幫我們處理好js之間的依賴關系，現在我們可以忽略js的加載順序，而只要在index.html內使用<script>標簽引入bundle.js即可。

在index.html內使用引入bundle.js

開發階段，index.html在根目錄，script引入好像也沒什么問題。

index.html在根目錄

但在真實發布項目時，發布的內容js文件都在dist文件夾內。但dist文件夾中現在沒有有index.html文件，怎么引入js文件? 那么打包js等文件好像毫無用處了。

現在我們的需求是
1.將index.html放到dist文件夾內
2.由於index.html的路徑發生改變了，所以引入的路徑也要做出的相應改變

.將index.html放到dist文件夾內並修改路徑

這些修改都要手動操作，手動操作難免出錯，這個時候我們就需要一個插件..

htmlWebpackPlugin

HtmlWebpackPlugin插件功能:
口在指定路徑自動生成一個index.html文件（可指定模板生成）
口將打包好的js文件，自動通過script標簽插入到body中

如果一個插件是webpack自帶的，這時僅需導入即可；如果不是自帶的，那就需要安裝，然后再導入。
為了減少webpack的包體大小，大部分插件都不是webpack自帶，需要自行安裝。

htmlWebpackPlugin使用步驟

1.安裝htmlWebpackPlugin指令
npm i html-webpack-plugin --save-dev

2.修改webpack.config.js配置，先引用html-webpack-plugin插件，並添加plugins屬性

引用html-webpack-plugin插件，並添加plugins屬性

3.運行npm run build指令，最后程序在dist文件夾自動生成一個index.html文件，此時無需我們再手動更改index.html的位置和引入js腳本.

dist文件夾自動生成一個index.html

自動引入打包好的js文件

4.由於我們使用webpack與vue協同開發，body體還需要一個div容器，用於綁定和掛載vue的元素，此時需要一個模板index.htm來生成。即dist文件夾下index.html需要根目錄的index.html生成。修改根目錄的index.html，並且給webpack.config.js下的htmlWebpackPlugin添加一個模板參數。

修改根目錄的index.html

給webpack.config.js下的htmlWebpackPlugin添加一個模板參數

5.運行npm run build指令，最后程序在dist文件夾自動生成一個index.html文件

運行npm run build指令

npm run build

6.打開瀏覽器控制台，在控制台可看到相應的輸出。

打開瀏覽器控制台，在控制台可看到相應的輸出