Iii. Automating the creation of HTML pages in projects

1. Now the project already has the initial page, the page refers to the bundle.js, but we pack the file name is indeterminate (with hash, etc.), what method can automatically change the path? with plug-ins;

2. installing NPM install Html-webpack-plugin–save-dev;

3. references in the configuration file

Official website =>using Plugins

　　

Initializes the plugin, runs NPM run Webpack, discovers the plugin to take effect, generates an HTML file, and references two JS, but does this have nothing to do with the HTML file in our root directory, or how to generate this HTML as a template in the root directory?

4. Send a reference to the plugin, pass a template;

Path: Why is it possible to determine that this index.html is a template HTML = context concept; There is a contextual property in the configuration (the default root directory)

Running NPM run Webpack, discovering that the generated HTML has the content of the template, introduced the package-generated files, tried to change the template, ran NPM run Webpack, and the resulting HTML changed.

5. Is there a problem now? All generated files are in the same folder and do not conform to development mode

Because the path we output is pointing to the same folder; modifying the path

6. Other parameters of Html-webpack-plugin

7. How to pass the parameter in the configuration file and then reference it in the template;

Use js Template language = =ejs syntax <%= htmlWebpackPlugin.options.title%>

　　

NPM run Webpack;

Can any one of these variables be uploaded to the page?

　　

NPM Run Webpack

So we can easily configure our template to get the HTML we want;

What information can we take from Htmlwebpackplugin?

To perform a traversal of the Htmlwebpackplugin:

1). Traverse Key First

After packing the key value:

2). Traverse the key value separately

Packaging

　　

Open https://www.npmjs.com/package/html-webpack-plugin;

A detailed explanation of the parameters can be seen;

Through these can control the output of the HTML content;

-for example, we want to put a part of JS in the head, part of the body, only through the configuration is not done, to change the template, because the template can directly reference the packaged information;

In the configuration will Inject:false;

Packaging

-for example, our project to go online, after the online address and our local relative path certainly not the same, with the help of new attributes: Pubicpath (post-line address)

After packing, it's an online address.

--Project on-line HTML compression, minify

Https://github.com/kangax/html-minifier#options-quick-reference

　　

Delete a comment, delete a space;

Packaging

8. All we mentioned before is a single page application, now we look at the multi-page application:

1). Entry can pass an object, it can also handle multi-page application;

2). Multi-page requires more than one HTML, plugins is an array, you can continue to call the plug-in Htmlwebpackplugin

--Add multiple page portals:

--Add A.js b.js c.js under the Scripts folder, so entry is one by one corresponding to the script folder;

--Increase the Call of chunk (page plugin);

Run, then found that three pages of content in addition to the title, the other content is the same, referring to the same JS (because the template is so set), how to let three pages reference their own JS it?

N Htmlwebpackplugin provides a parameter chunks

chunks: Allows youto add only some chunks (e.g. only the unit-test chunk), allowing to add some useful chunk to yourself

The template HTML to specify the introduction of JS removed;

Run

At this time each page introduces its own JS, the generated HTML file and our entry file chunk one by one corresponds to;

Htmlwebpackplugin provides an additional parameter for the excludechunks exclusion Method

Excludechunks:allows Youto Skip some chunks (e.g. don ' t add the unit-test chunk) except those chunk are excluded; other chunk are introduced;

This allows you to freely match the chunk required for each page and the chunk to be excluded.

3). If we want to improve performance, such as to embed some initialization script directly into the page, reduce the HTTP request, improve the speed of the script, the start Webpack does not have this function, and then someone on the githup constantly to ask this demand:

Https://github.com/jantimon/html-webpack-plugin

　　

The Compilation:webpack itself exposes a reference to our use;

Assets: The object of the file that is generated after the package is packaged, and the path of the file name into this object, you can get the index of the document ;

Source (): Get the content of JS file;

Last demonstrated in template fetch chunk file path (with Publicpath):

But compilation.assets key file name is not with Publicpath, so to entry in the Publicpath filter out;

Use to get the length of the Publicpath;

Run

Then we get the path without publicpath.

　　

Then use the official method:

Run

(If an error occurs) Check: Error, entry undefined, because each need to introduce Main.js file

Run

The contents of main are inserted into the script tag, but the Mian SRC in chunk is also inserted; Modify the template and parameters:

Run; ok!

Iii. Automating the creation of HTML pages in projects