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

Last Update:2017-09-10 Source: Internet

Author: User

Tags webpack tutorial

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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> to
Third, 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> A
Execute 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)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More