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

In this article, we go through the traversal analysis of Html-webpack-plugin's example Htmlwebpackplugin, explaining several common properties (inject, minify) and the addition of custom attributes, and we continue to delve into his configuration options.

One, chunks options

This property is useful for specifying which chunk a page will load (e.g. JS files)

We can create multiple page templates with him. For example, we in the actual development, do a blog site, generally have a home page, the article list pages, the article details page and so on, these pages have a feature, all to introduce some common JS file and the page-specific JS file, such as:

Home (index.html) introduced Main.js, index.js

Article List page (list.html) introduced Main.js, list.js

Article details page (detail.html) introduced Main.js, detail.js

The traditional way, one of the open files, copy modification, if the post-maintenance, but also a pile of files, find, copy, modify. It is easy to make mistakes, and inefficient, we look at how to improve the efficiency of webpack, open the front-end industrialization Development Revolutionary Road

Webpack.dev.config.js File Code:

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Module.exports = {3 entry: {4Main: './src/js/main.js ',5Index: './src/js/index.js ',6List: './src/js/list.js ',7Detail: './src/js/detail.js '8     },9 output: {Ten         //__dirname, which is the absolute path where the current Webpack.config.js file resides OnePath: __dirname + '/dist ',//output path, to use absolute path AFileName: ' Js/[name]-[hash].bundle.js ',//file name of the output after packaging -     }, - plugins: [ the         NewHtmlwebpackplugin ({ -Template: './index.html ', -Title: ' Blog Home-by Ghostwu ', -FileName: ' index.html ', +Inject:true, -Chunks: [' main ', ' index '] +         }), A         NewHtmlwebpackplugin ({ atTemplate: './index.html ', -Title: ' List page-by Ghostwu ', -FileName: ' list.html ', -Inject:true, -Chunks: [' main ', ' list '] -         }), in         NewHtmlwebpackplugin ({ -Template: './index.html ', toTitle: ' Article details page-by GHOSTWU ', +FileName: ' detail.html ', -Inject:true, theChunks: [' main ', ' detail '] *         }) $     ]Panax Notoginseng};

Then in the SRC JS directory, create main.js, index.js,list.js,detail.js file, carry out packaging (NPM run D) will generate 3 files under Dist, each introduced to their own JS file, the next time to maintain, Just modify this configuration file, packaging it again, is not very convenient

Second, excludechunks option

This is a good understanding, that is, there are a lot of chunks, exclude do not load

Webpack.dev.config.js File Code:

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2Module.exports = {3 entry: {4Main: './src/js/main.js ',5Index: './src/js/index.js ',6List: './src/js/list.js ',7Detail: './src/js/detail.js '8     },9 output: {Ten         //__dirname, which is the absolute path where the current Webpack.config.js file resides OnePath: __dirname + '/dist ',//output path, to use absolute path AFileName: ' Js/[name]-[hash].bundle.js ',//file name of the output after packaging -     }, - plugins: [ the         NewHtmlwebpackplugin ({ -Template: './index.html ', -Title: ' Blog Home-by Ghostwu ', -FileName: ' index.html ', +Inject:true, -Excludechunks: [' list ', ' detail '] +         }), A         NewHtmlwebpackplugin ({ atTemplate: './index.html ', -Title: ' List page-by Ghostwu ', -FileName: ' list.html ', -Inject:true, -Excludechunks: [' index ', ' detail '] -         }), in         NewHtmlwebpackplugin ({ -Template: './index.html ', toTitle: ' Article details page-by GHOSTWU ', +FileName: ' detail.html ', -Inject:true, theExcludechunks: [' list ', ' index '] *         }) $     ]Panax Notoginseng};

Once the configuration file has been modified, it will be packaged with NPM run D, with the same effect as using chunks.

Third, the introduction of page src into the file, the way to use the script tag embedding, reduce the HTTP request (improve load performance)

to achieve this, we install a plugin html-webpack-inline-source-plugin

Installation:npm install--save-dev html-webpack-inline-source-plugin

Webpack.dev.config.js File Code:

1 varHtmlwebpackplugin = require (' Html-webpack-plugin '));2 varHtmlwebpackinlinesourceplugin = require (' Html-webpack-inline-source-plugin '));3Module.exports = {4 entry: {5Main: './src/js/main.js ',6Index: './src/js/index.js ',7List: './src/js/list.js ',8Detail: './src/js/detail.js '9     },Ten output: { One         //__dirname, which is the absolute path where the current Webpack.config.js file resides APath: __dirname + '/dist ',//output path, to use absolute path -FileName: ' Js/[name]-[hash].bundle.js ',//file name of the output after packaging -     }, the plugins: [ -         NewHtmlwebpackplugin ({ -Template: './index.html ', -Title: ' Blog Home-by Ghostwu ', +FileName: ' index.html ', -Inject:true, +Excludechunks: [' list ', ' detail '], AInlinesource: '. (JS|CSS) $ '//all inline at         }), -         NewHtmlwebpackinlinesourceplugin (), -         NewHtmlwebpackplugin ({ -Template: './index.html ', -Title: ' List page-by Ghostwu ', -FileName: ' list.html ', inInject:true, -Excludechunks: [' index ', ' detail '] to         }), +         NewHtmlwebpackplugin ({ -Template: './index.html ', theTitle: ' Article details page-by GHOSTWU ', *FileName: ' detail.html ', $Inject:true,Panax NotoginsengExcludechunks: [' list ', ' index '] -         }) the     ] +};

After executing the NPM run D Package Command, the JS and CSS of the dist/index.html file are changed into inline mode

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