Analysis of the use of HTML webpack plugin

Time:2020-10-5

useHTML webpack pluginTo launch the pagePut HTML pages in memoryTo improve the loading speed of the page
And it canAutomatic setting index.html The path of JS file import in the page

Premise: webpack is installed in the project. Steps:

Step 1, enter in the root directory of the projectcnpm i html-webpack-plugin -DInstall 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 plug-in after installationwebpack.config.jsConfiguration file for

In the configuration fileImportHTML webpack plugin andto configureTemplate page path and 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 plug-in nodes
    plugins:[
        //Create HTML webpack plugin plug-in
        New htmlwebpackplugin ({// set parameters)
            template:path.join (E) dirname,"./src/ index.html "), // specifies the template page to generate in memory pages based on the specified page
            filename:" index.html "// specifies the name of the generated in memory page
        })
    ]
}

After using the HTML webpack plugin plug-in, there is no need for manual processing bundle.js Reference path of
Because the HTML page in the generated memory hasAutomatically introduced bundle.js The right path for

Summary – the role of the plug-in:

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

2. Good page in the package automatically bundle.js

This article on the use of HTML webpack plugin tutorial on this, more related HTML webpack plugin plug-in content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!