Webpack (ii) generate a simple HTML file from a template

(a) using Webpack to generate HTML from a template, you first need to install the plugin html-webpack-plugin.

　　　Install the plugin command in the project folder as follows:

NPM Install Html-webpack-plugin--save-dev

Two

New Webpack.config.js, name can be changed, run after change, specify profile name.

For example, if the configuration file is named My.webpack.config.js, you need to add the following code to the Package.json file at scripts:

" Scripts " : {    "webpack""webpack--config webapack.config.js-- Progress--display--modules--colors--dispaly-reason"  }

When compiling, use the NPM run Webpack command.

Three

Webpack is support for AMD, CMD, ES6 modular programming, so we can use require, exports to get, return module content.

In Webpack.config.js, add the following code

We place the original files in the/src/js folder, and the copied files are placed in the/dist/js folder.

varHtmlwebpackplugin=require (' Html-webpack-plugin '); Module.exports={   /*entry: './src/scripts/main.js ',*/entry:{Main:'./src/scripts/main.js ',//File source path A:'./src/scripts/a.js '}, output:{path:'./dist ', FileName:' Js/[name]-[hash].js ',//After the generated file name is a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js
Publicpath:' http://cdn.com '//publicpath used to publish the feathers generated when}, plugins:[Newhtmlwebpackplugin ({filename:' Index.html ',//file name template generated through templates:' Index.html ',//template path inject:false,//whether to automatically add the automatically generated JS file link in the template file title:' This is Webpack Demo ', minify:{removecomments:true//whether to remove annotations when compressing            }        })    ]};

We can write PHP-like, ASP. NET syntax format in template index.html.

Template index.html File Template content

<! DOCTYPE html>    :<=json.stringify (Htmlwebpackplugin.files[key]) > <input type= "text" > <% for(varKeyinchhtmlwebpackplugin.options) {%> <%=key%>:<%=json.stringify (Htmlwebpackplugin.options[key])%> <% }%> <% for(varKeyinchHtmlwebpackplugin.files) {%> <%=key%>:<%=json.stringify (Htmlwebpackplugin.files[key])%> <%}% > <script type= "text/javascript" src= "<%=htmlWebpackPlugin.files.chunks.a.entry%>" ></script> </div></body>
You can generate an HTML file by running Webpack.
Webpack (ii) generate a simple HTML file from a template