Use of Html-webpack-plugin

First step before use: npm install Html-webpack-plugin--save--dev | | --save (Tips:--save--dev and--save The biggest difference is that the--dev installation is to only in the develop development environment depends on, the line run does not need to install also can run the dependence), presents the Webpack Chinese document Address: = "/http Www.jqhtml.com/7626.html

Next=> you need to refer to this dependency in the Webpack configuration file webpack.base.config after installation, Exp:var htmlwebpackplugin=required (' Html-webpack-plugin ') , after introduction can be used in the configuration of the Plugins property in the new Htmlwebpackplugin ({}) after the use of the command NPM run Webpack will find that an HTML template was generated to prove that the plug-in used successfully.

Next is the Webpack configuration in the plugins option new out of the Htmlwebpackplugin parameter describes:

1): You can specify the Webpack packaged output template file through the template property: = "template:index.html This will be the entry of the Index.html file template to package the output.

2): You can specify the output file name by using the FileName property: = "FileName: ' index-[hash].html ' specifies the filename index+ hash value. (The biggest difference between tips:chunkhash and hash is that the hash represents compliation, and the Compliation object is regenerated after any file to be packaged is changed. In other words, modifying a file individually will affect the Compliation object's refactoring of the entire file, so the original unmodified file cache will be overwritten by the newly generated package file, and Chunkhash will be the hash value calculated based on the content of the module file. Any change to a file only affects its own hash value and does not affect other file hashes, which are independent. This content is described in http://www.cnblogs.com/ihardcoder/p/5623411.html).

3): You can specify the location of the template content of the packaged output via the Inject property: = "inject: ' body ' This will embed the output content inside the body tag

4): You can customize the title name through the title property, and refer to the value of the title in the template by <%= htmlwebpackplugin.options.title%> and output it in the packaged file.

5): The data attribute is the same as above.

6): You can use <% for (var key in Htmlwebpackplugin) {%><%=key%><%}%> to export failes and options two objects in a package file, It is also possible to output all values of two objects in the same way, respectively.

7): You can use <script src= "<%=htmlWebpackPlugin.chunks.main.entry%>" in the template file ></script> Referencing the Main.js file in the portal entry in a packaged file

8): The output file can be compressed via the Minify property: = "removecomments:true//Delete Note------Other Minify Properties Reference Webpack document

9): Multi-page packaging needs to specify multiple HTML page directories in entry and create multiple corresponding htmlwebpackplugin, and can customize other property names to achieve through the output template file for the purpose of referencing the property

10): When multiple pages are packaged, you can specify the JS file path in the entry to be introduced via the chunks property

11): When multiple pages are packaged, the Excludechunks property can be used to exclude the JS file path in the entry specified by this property.

: The assets[] method in the Webpack compilation object receives the file path after removing the Publicpath (online address) and writes the public file main directly to the packaged output HTML file via the source () method, This can greatly improve wepack packaging efficiency = "<%=COMPILATION.ASSETS[HTMLWEBPACKPLUGIN.FILES.CHUNKS.MAIN.ENTRY.SUBSTR (　　　　　　　　HtmlWebpackPlugin.files.publicPath.length)].source%>, other outside the chain of JS files can be in the template file Ring the entry directory corresponding to each JS file name of the chunk object in all files objects in the public file Main.js, and introduce the file through the script tag:

<%for (var k in htmlWebpackPlugin.files.chunks) {%>

<%if (k!= ' main ') {%>

<script src= "<%=htmlWebpackPlugin.files.chunks[k].entry%>" type= "Text/javascript" ></script>

<%}%>

<%}%>

The last run once Webpack can see the contents of the embedded main and other JS files of the chain

The above is the Htmlwebpackplugin use process

　　　　　　　　　　　　

　　　　　　

　　　　　　

　　

　　　　

Use of Html-webpack-plugin