[JS Master Road] Webpack Tutorial Series 4-Plug-in use of the Html-webpack-plugin configuration (top)

Remember the index.html file we had earlier? The script tag is still a dead index.bundle.js file, then how to turn them into a dynamic index.html file, this dynamically generated index.html file will dynamically introduce our packaged after the generated JS file? , we can use plugin html-webpack-plugin, first install this plugin npm install html-webpack-plugin--save-dev, OK, then start with this plugin

Official Reference documents:

Plug-in general usage: https://webpack.js.org/configuration/plugins/#plugins

Html-webpack-plugin Plugin Usage: https://webpack.js.org/plugins/html-webpack-plugin/

Html-webpack-plugin plug-in configuration: https://github.com/jantimon/html-webpack-plugin#configuration

first, we need to introduce plugins in the configuration file webpack.dev.config.js.

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Module.exports = {3 entry: {4Main: './src/js/main.js ',5Calc: './src/js/calc.js '6     },7 output: {8         //__dirname, which is the absolute path where the current Webpack.config.js file resides9Path: __dirname + '/dist ',//output path, to use absolute pathTenFileName: ' [name]-[hash].bundle.js '//file name of the output after packaging One     }, APlugins: [NewHtmlwebpackplugin ()] -};

Then run the NPM run D Packaging command, you can dynamically generate index.html files in the Dist directory, and introduced 2 dynamic packaging generated JS files, this time to refresh the index.html file, you can see the results of the JS function execution

Second, however, this new HTML file under the Dist directory is not associated with the index.html file under our project directory (DEMO2) and clearly does not meet the actual project requirements, The result we want should be according to Demo2 the following index.html this file, for the template to generate Dist directory under the index.html file, so that the two files to establish an association, we only need in the configuration file Webpack.dev.config.js, to HTML-WEBP The Ack-plugin constructor is passed in to the template templates to

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Module.exports = {3 entry: {4Main: './src/js/main.js ',5Calc: './src/js/calc.js '6     },7 output: {8         //__dirname, which is the absolute path where the current Webpack.config.js file resides9Path: __dirname + '/dist ',//output path, to use absolute pathTenFileName: ' [name]-[hash].bundle.js '//file name of the output after packaging One     }, APlugins: [NewHtmlwebpackplugin ( -         { -Template: './index.html ' the         } -     )] -};

Template: This is the index.html file in the demo directory to generate the dist/index.html file for the templates, and then execute the NPM run D Packaging command can be regenerated

Three, but there is a small problem, We packaged the generated index.html files and JS files are in the same directory, in large projects within the management is certainly very confusing, we want to generate the. html file and JS file stored separately, we can in the Webpack.dev.config.js file in the filename configuration, add a directory J S (JS files are placed under this directory), separate them, configure it, don't forget to execute the package command (NPM run D)

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Module.exports = {3 entry: {4Main: './src/js/main.js ',5Calc: './src/js/calc.js '6     },7 output: {8         //__dirname, which is the absolute path where the current Webpack.config.js file resides9Path: __dirname + '/dist ',//output path, to use absolute pathTenFileName: ' Js/[name]-[hash].bundle.js '//file name of the output after packaging One     }, APlugins: [NewHtmlwebpackplugin ( -         { -Template: './index.html ' the         } -     )] -};

Iv. configuration options for plugins: inject and filename

Webpack.dev.config.js configuration file:

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Module.exports = {3 entry: {4Main: './src/js/main.js ',5Calc: './src/js/calc.js '6     },7 output: {8         //__dirname, which is the absolute path where the current Webpack.config.js file resides9Path: __dirname + '/dist ',//output path, to use absolute pathTenFileName: ' Js/[name]-[hash].bundle.js '//file name of the output after packaging One     }, APlugins: [NewHtmlwebpackplugin ( -         { -Template: './index.html ', theFileName: ' index-[hash].html ', -Inject: ' Head ' -         } -     )] +};

FileName: Package generated file name, also can add directory, default is not written when is index.html

Inject: There are 4 values: TRUE | ' Head ' | ' Body ' | False

If set to head, is to put JS into the head tag inside, if set to body, is to put JS into the body inside, false: JS file is not introduced true: Introduce JS file

Five, plug-in options: Title

Title: Caption of the template

Webpack.dev.config.js configuration File Code:

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Module.exports = {3 entry: {4Main: './src/js/main.js ',5Calc: './src/js/calc.js '6     },7 output: {8         //__dirname, which is the absolute path where the current Webpack.config.js file resides9Path: __dirname + '/dist ',//output path, to use absolute pathTenFileName: ' Js/[name]-[hash].bundle.js '//file name of the output after packaging One     }, A plugins: [ -         NewHtmlwebpackplugin ({ -Template: './index.html ', theTitle: ' Ghostwu teaches you to learn Webpack ', -Inject:true -         }) -     ] +};

Then, in the Index.html file under the Demo2 directory, introduce the title with the Ejs template syntax

1 <! DOCTYPE html> 2  3  4     <meta charset= "UTF-8" > 5     <meta name= "viewport" content= "Width=device-width, initial-scale=1.0" > 6     <meta http-equiv= " X-ua-compatible "content=" Ie=edge "> 7     <title><%= htmlWebpackPlugin.options.title%> </title> 8  9 <body>ten </body> </ Html>

Note: HtmlWebpackPlugin.options.title, do not put the H-Capital of HTML, please note that I have been here for a long time the pit

[JS Master Road] Webpack Tutorial Series 4-Plug-in use of the Html-webpack-plugin configuration (top)