Shulou(Shulou.com)05/31 Report--

This article mainly explains "webpack how to automatically generate html pages", the content of the explanation is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "webpack how to automatically generate html pages" bar!

First of all, some students may think that after each package, I change the name of the packaged file, and then change the file name in the reference code in the home page index,html. This method is OK, but it has to be changed so much every time, which is obviously time-consuming, and manual modification is likely to bring bug. Another student may say, don't bother, just add a random number after the css,js resource reference before you go online. Although this method is much simpler than the first method, it still does not solve the previous problem. So can we add a random string to the directly generated file each time, and then the references in the home page automatically become the latest packaged file? The answer is yes, and I'm going to talk about using webpack to implement

To implement this function with webpack, you first need to download a plug-in for webpack, html-webpack-plugin.

Npm install html-webpack-plugin

The next step is to create a new file in envy, which is the template for the home page file we are going to generate.

/ / template.jsmodule.exports = function (templateParams) {return (`${templateParams.htmlWebpackPlugin.options.title} function hasToken () {var result = / ztoken/g.test ([xss_clean]) & &! ([xss_clean] .split ('ztoken=') [1] .split (';') [0] ='') Return result} function clearCookieAll () {var keys = [xss_clean] .match (/ [^ =;] + (? =\ =) / g); if (keys) {for (var I = keys.length; imuri;) [xss_clean] = keys [I] +'= 0 Expires=' + new Date (0). ToUTCString ()} if (! hasToken ()) {console.warn ('invalid token') clearCookieAll () _ window.location.href =' / index.html'} `)}

After the preparatory work is done, the next step is to configure.

/ / first introduce the plug-in var HtmlWebpackPlugin = require ('html-webpack-plugin')

Bounds to configure the plugins option of webpack

Plugins: [new HtmlWebpackPlugin ({/ / insert css/js according to the template to generate the final HTML / / favicon:'./src/img/favicon.ico', / / favicon path filename:'src/index.html', / / the html storage path generated Relative to path template:'./src/app/template/template.js', / / html template path title: 'upgrade space operation backend', cache: true, inject:true, / / what content is allowed to be modified by the plug-in Including head and body hash:true, / / generate hash values for static resources minify: {/ / compress HTML file removeComments:true, / / remove comments collapseWhitespace:false / / remove whitespace and newline characters}})]

After executing the packaging command, you will find that the generation automatically generates HTML code, and a string of hash values are automatically generated after the resource is referenced by the index,html resource, so that the user will automatically get the latest resource after each update.

Thank you for your reading, these are the contents of "how webpack automatically generates html pages". After the study of this article, I believe you have a deeper understanding of how webpack automatically generates html pages, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.