A brief analysis of the use of the HTML webpack plugin

Using the html-webpack-plugin plug-in to start the page can put the html page into memory to increase the page loading speed and automatically set the path of the JS file introduced in the index.html page

Prerequisite: Webpack is installed in the project. Steps:

Step 1. Enter cnpm i html-webpack-plugin -D in the root directory of the project to install the html-webpack-plugin plug-in to the development dependency. Its function is to generate the corresponding HTML page in memory according to the specified template page.

Step 2 : Modify the configuration file of webpack.config.js after the plug-in is installed

Import the html-webpack-plugin plug-in in the configuration file and configure the template page path and the generated page name.

const path = require("path")
// Import html-webpack-plugin
const htmlWebpackPlugin = require("html-webpack-plugin")

module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    //Configure plugin nodes plugins:[
        // Create html-webpack-plugin plugin new htmlWebpackPlugin({ // Set parameters template:path.join(__dirname,"./src/index.html"), // Specify the template page to generate the page in memory according to the specified page filename:"index.html" // Specify the name of the generated page in memory })
    ]
}

After using the html-webpack-plugin plug-in, there is no need to manually process the reference path of bundle.js because the correct path of bundle.js has been automatically introduced in the generated HTML page in memory.

Summary - What plugins do:

1. Automatically generate a page in memory based on the specified page

2. Automatically introduce the packaged bundle.js into the page

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