webpack插件之htmlWebpackPlugin

webpack插件?自動化?htmlWebpackPlugin

由于webpack已經幫我們處理好js之間的依賴關系，現在我們可以忽略js的加載順序，而只要在index.html內使用

在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.打開瀏覽器控制臺，在控制臺可看到相應的輸出。

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

總結

以上是生活随笔為你收集整理的npm的插件如何直接在html中使用,webpack插件之htmlWebpackPlugin的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。