The use of the html-webpack-plugin of Webpack

Webpack the actual use of the process has a common plug-in html-webpack-plugin. Html-webpack-plugin will help us automatically generate an HTML page, and can dynamically write page title and linked bundle.js files on the page.

Reasons for use

When Webpack is packaged, it starts with the entry JS file in the entry, looks for the dependencies of the component, and ultimately generates the packaged bundle.js file in the corresponding directory based on the configuration in output. If we define a index.html file ourselves, we may face some problems: one is the actual production of the Bundle.js file is followed by a hash value, before packaging this value is not known, directly in the page given bundle file path is not very good; the other reason is that the bundle.js file Naming is based on the Webpack configuration of the output.filename dynamic generation, in the Index.html page directly introduced is also not convenient; for one reason, webpack files generated after packaging will generally be in a dist directory, run, and then manually copy index.html to dis The T directory is not a good idea after all.
These problems, html-webpack-plugin can be very good for me to solve. The detailed use of the plugin can go to this address.

Here is a simple example to illustrate the use of this plugin

Directory structure and description of the project

The project source is stacked in the SRC directory, and the documents are described below:
template.html--entry HTML file for the project
index.js--Project Package Entry file
Hello.js--index.js-Dependent files

Installation and use

Html-webpack-plugin is not a webpack built-in plugin and needs to be installed.
NPM Install Html-webpack-plugin--save-dev

After installation, plug-ins need to be introduced into the Webpack

After you build using the Webpack command, the following directories and files are generated

Look at the HTML file we generated:

Use in Devserver

In the actual development process, the code will be changed frequently, after each change to republish to the Dist directory, and then refresh the browser, this is not very convenient. Using Devserver can simplify this process and see the configuration using Devserver.

Start with the command Webpack-dev-server--hot
Then modify the address in the browser to http://localhost:3000/admin.html

The use of the html-webpack-plugin of Webpack