webpack4.0(三)--動態生成html(html-webpack-plugin)

webpack4.0--動態生成html　　　　　　　　　　　　　　　　　　

前言：

　　webpack-dev-server實現了自動編譯刷新瀏覽器，讓編譯出來的bundle.js托關於服務器根路徑（電腦內存）中去。使用--contentBase指令指定啟動目錄（物理磁盤中的頁面路徑），還需要修改此頁面中script標簽的src屬性（指向url根路徑，托管路徑），麻煩。除了解決此問題，還需要實現頁面也放到內存中，則可以借助於一個webpack插件：html-webpack-plugin，配置啟動頁面。

1、安裝：

　　全局:

npm i html-webpack-plugin -g

　　再項目根目錄執行：

npm i html-webpack-plugin -D

2、配置

　　增加webpack配置文件配置（webpack.config.js）

var HtmlWebpackPlugin = require('html-webpack-piugin');//導入插件
　　
//配置插件的節點
plugins:[
    //自動生成html,從src到dist的過程。。
    new HtmlWebpackPlugin({
        template:'src/index.html',//以src下面的index.html為模板去創建新的html文件
            filename:'index.html',//打包好后，新建的html名字為index.html
         }),
]

　　

　　　　

　　效果：

 

　　　　　1、 運行webpack --config build/webpack.conf.js --mode production，不需要手動在dist里面手動建html文件 運行直接生成，也不需要手動處理bundle.js的引用了（托管於根路徑頁面需要修改引用路徑）html-webpack-plugin插件生成的內存中的頁面已幫我們創建並正確引用了打包編譯生成的bundle.js的<script></script>。

　　　　2、也可以在package.json文件里面，使用scripts字段自定義腳本命令。   ---------       "build": "webpack --config build/webpack.conf.js --mode production"

　　　　

 　　　　

　　　　dist目錄里面自動生成HTML文件以及js文件，html文件也自動注入了js文件，不需要我們手動完成。

　　　　

3、更多配置

　　　在實際的項目中，需要自定義一些 html-webpack-plugin 的配置， 像指定生成目錄和文件， 使用指定模版生成文件， 這就更改默認配置來實現。

　　　　

 總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　使用 html-webpack-plugin 之后，我們不需要手動處理bundle.js的引用路徑了，因為這個插件，已經幫我們自動創建了一個合適的script，並且引用了正確的路徑，這解決了很多我們一不小心犯的小錯誤。