A brief analysis of the tutorial on using the html webpack plugin

Use the html-webpack-plugin plugin to start the page to put the html page into memory to improve the loading speed of the page

It can also automatically set the path introduced by JS file in the index.html page

Prerequisites for use: Webpack is installed in the project:

Its function is to generate corresponding HTML pages in memory based on the specified template page.

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

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

After using the html-webpack-plugin plugin, there is no need to manually process the reference path of bundle.js

Because the correct path to bundle.js has been automatically introduced into the generated HTML page in memory

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

2. Automatically introduce packaged bundle.js into the page

This is the end of this article about a brief analysis of the tutorial on using the html webpack plugin. For more related html webpack plugin content, please search for previous articles from Wulin.com or continue to browse the related articles below. I hope everyone will support Wulin.com in the future!