1. The project directory structure is:
2. Webpack.config.js configuration file is:
varHtmlwebpackplugin = require (' Html-webpack-plugin ')); Module.exports= { //Packing Entranceentry: {main:'./src/js/main.js ', A:'./src/js/a.js ', B:'./src/js/b.js ', C:'./src/js/c.js ' }, //the packaged fileoutput: {//no __dirname will be an error .Path: __dirname + '/dist ', //Note: Use [name] to ensure that each file name is not duplicatedFileName: ' Js/[name]-[chunkhash].js ', //on-line address configurationPublicpath: ' http://cdn.com/'}, plugins: [NewHtmlwebpackplugin ({ Template: ' index.html ', filename: ' a.html ', title: ' This is a.html ', // increase the specified chunks chunks:[' main ', ' a '] }), Newhtmlwebpackplugin ({Template:' Index.html ', FileName:' B.html ', Title:' This is b.html ', //adds the specified chunkschunks:[' main ', ' B '] }), Newhtmlwebpackplugin ({Template:' Index.html ', FileName:' C.html ', Title:' This is c.html ', //adds the specified chunkschunks:[' main ', ' C '] }) ]}
3. Execute the command:
NPM Run Webpack
4. Compiling:
Html-webpack-plugin plug-ins generate multiple pages based on templates