Webpack Front-End build Tool Learning Summary (iv) HTML pages in an automated build project

Follow above: Webpack front-end build Tool Learning Summary (iii) of the Webpack.config.js configuration file

1. Install the Html-webpack-plugin plugin, enter the command:npm install Html-webpack-plugin--save-dev

2. In the Webpack.config.js file, introduce the Html-webpack-plugin plugin

3. Input command: NPM run Webpack, compile package

Can see in the Dist/js directory of the new generation into a index.html file, and introduced the newly compiled generated two JS, but this index.html and the SRC folder below the index.html is not related

SRC below the index.html below

4. If you build a new HTML on this basis, you need to configure the parameters of the HTML plugin inside the Webpack.config.js

After compiling the package, the file directory under Dist is as follows:

Compile the generated index.html file as follows

5. But we do not want the HTML file and JS file in the same level directory, modify the output property value in the Webpack.config.js file in the normal project.

Input command: NPM run Webpack, after compiling the packaged directory for

Webpack Front-End build Tool Learning Summary (iv) HTML pages in an automated build project