html-webpack-plugin的作用

html-webpack-plugin的主要作用就是在webpack構建後生成html檔案，同時把構建好入口js檔案引入到生成的html檔案中。

安裝html-webpack-plugin

Webpack 5

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

  yarn add --dev html-webpack-plugin

Webpack 4

  npm i --save-dev [email protected]

  yarn add --dev [email protected]

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:"development",
    plugins: [
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./public/index.html'
        })
    ]
}

專案檔案目錄結構：

執行webpack打包命令，在 ./dist 資料夾下會生成，main.js和index.html兩個檔案，index.html檔案引入了main.js檔案。

更多html-webpack-plugin設定：https://www.npmjs.com/package/html-webpack-plugin