We talked about the options configuration and how to get the data, and in this article, we continue to go deeper into the options configuration
First, the options in the Html-webpack-plugin plugin in addition to their own definition of some basic configuration, we can arbitrarily add the custom data
Webpack.dev.config.js 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 }, A plugins: [ - NewHtmlwebpackplugin ({ -Template: './index.html ', theTitle: ' Ghostwu teaches you to learn Webpack ', -Inject:true, -Date:NewDate (), -UserName: ' Ghostwu ', +Age:22 - }) + ] A};
We have added 3 custom data (Date,username, age) to webpack.dev.config.js, which we can read in the index.html template below the Demo2 directory.
1 2 3
After the same setup, remember (NPM run D) repack the build.
Second, complete the Htmlwebpackplugin this instance in the template to traverse out
Demo2 the following index.html file:
1<! DOCTYPE html>234<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<body>9Ten One A<ul> -<% for(varKeyinchHtmlwebpackplugin) {%> -<%if(Key = = ' files ') {%> the -<% for(varFinchHtmlwebpackplugin[key]) {%> -<li> <%= f%>, <%= htmlwebpackplugin[key][f]%> </li> -<%if(f = = ' chunks ') {%> +<p><%= json.stringify (htmlwebpackplugin[key][f])%></p> -<%}%> +<%}%> A<%}Else{%> at -<% for(varFinchHtmlwebpackplugin[key]) {%> -<li> <%= f%>, <%= htmlwebpackplugin[key][f]%> </li> -<%}%> -<%}%> -<%}%> in</ul> -</body> toThird, through the above printed data, we can manually specify the introduction of JS file, do not need to automatically inject
Webpack.dev.config.js 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 }, A plugins: [ - NewHtmlwebpackplugin ({ -Template: './index.html ', theTitle: ' Ghostwu teaches you to learn Webpack ', -Inject:false - }) - ] +};
Inject is set to false, JS will not be automatically injected into the package after the file dist/index.html, so we will automatically specify the JS file to be loaded.
demo2/index.html File Code:
1<! DOCTYPE html>234<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<script src= "<%= htmlWebpackPlugin.files.chunks.main.entry%>" ></script>9<body>Ten<script src= "<%= htmlWebpackPlugin.files.chunks.calc.entry%>" ></script> One</body> AExecute the Package command (NPM run D), the index.html file generated in the Dist directory, the source code will become our manually injected JS file
Iv. minify option to compress HTML files
He can configure a lot of values, official reference address: Https://github.com/kangax/html-minifier#options-quick-reference
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:false, - minify: { -Removecomments:true,//Remove Comments +Collapsewhitespace:true,//Remove Empty lines - } + }) A ] at};
Here, we configure two commonly used compression options (remove comments, remove empty lines), then the package generated index.html file, will become compressed version (such as you see the jquery.min.js such files, are compressed processing)
[JS Master Road] Webpack Tutorial Series 5-Plug-in use of the Html-webpack-plugin configuration (medium)