安裝

npm i --save-dev html-webpack-plugin

配置檔案

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: __dirname+"/src/index.js", //入口檔案,從專案根目錄指定
    output: { //輸出路徑和檔名，使用path模組resolve方法將輸出路徑解析為絕對路徑
        path: path.resolve(__dirname, "build"), //打包後的js檔案存放的地方 將js檔案打包到build的目錄
        filename: "main.js" //打包後輸出的js的檔名 將入口檔案index.js打包到build/main.js
    },
    devServer: {
        contentBase: './build',//預設webpack-dev-server會為根資料夾提供本地伺服器，如果想為另外一個目錄下的檔案提供本地伺服器，應該在這裡設定其所在目錄（本例設定到"build"目錄）
        historyApiFallback: true,//在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
        inline: true,//設定為true，當原始檔改變時會自動重新整理頁面
        port: 8080//設定預設監聽埠，如果省略，預設為"8080"
    },
    plugins: [
  	  new HtmlWebpackPlugin({
	    title: 'Custom template',
	    template: './src/index.html', //指定要打包的html路徑和檔名
	    filename:'../index.html' ,//指定輸出路徑和檔名 
	    favicon:'./src/img/apple-touch-icon.png',//給生成的 html 檔案生成一個標籤<link rel="shortcut icon" href="apple-touch-icon.png">
	    hash: true,//給生成的 js 檔案一個獨特的 hash 值 <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
	    showErrors:true,//webpack 編譯出現錯誤
	    minify:{//對 html 檔案進行壓縮，minify 的屬性值是一個壓縮選項或者 false 。預設值為false, 不對生成的 html 檔案進行壓縮
                 removeComments:true, // 去除註釋
                 collapseWhitespace: true //是否去除空格
             }
	  })
    ]
}

 

index.html

在html的title處填寫<title><%= htmlWebpackPlugin.options.title %></title>打包後會自動附上new HtmlWebpackPlugin方法裡面的title的值