Detailed explanation of html-webpack-plugin usage

Recently, I used html-webapck-plugin plug-in for the first time in a react project. It has two main functions:

Dynamically add hash after each compile for external resources such as script and link introduced in HTML files to prevent problems with referencing cached external files

You can generate and create HTML entry files. For example, a single page can generate an HTML file entry. Configuring N html-webpack-plugin can generate N page entries.

1. Installation

cnpm i webpack-plugin -D

2. Reference in webpack.config.json

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') //First stepmodule.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
    },
    mode: 'development',
    devServer: {
        open: true,
        port: 8080,
        hot: true,
        contentBase: 'src'
    },
    plugins: [
        new htmlWebpackPlugin({ //Step 2 template: path.join(__dirname, './src/index.html'), //Specify the path of the generated template filename: 'index.html' //Specify the name of the generated page })
    ]
}

3. The role of html-webpack-plugin

1. Generate a file of the specified template in memory, which is faster to access 2. Automatically add bundle.js file to the specified template file

Summarize

This is the end of this article on the detailed use of html-webpack-plugin. For more information on the use of html-webpack-plugin, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!