The html-webpack-plugin plug-in generates multiple pages based on the template,

The html-webpack-plugin plug-in generates multiple pages based on the template,

1. The project directory structure is:

 

2. The webpack. config. js configuration file is:

 

Var htmlWebpackPlugin = require ('html-webpack-plugin'); module. exports = {// packaging entry: {main :'. /src/js/main. js', :'. /src/js/. js', B :'. /src/js/B. js', c :'. /src/js/c. js '}, // The packaged file output: {// If _ dirname is not added, the following error occurs: path: _ dirname +'/dist'. // note: use [name] to ensure that each file name does not repeat filename: 'js/[name]-[chunkhash]. js', // configure publicPath for the online address :' http://cdn.com/ '}, Plugins: [new htmlWebpackPlugin ({template: 'index.html', filename: 'a.html ', title: 'This is a.html', // Add the specified chunks: ['main', 'a']}), new htmlWebpackPlugin ({template: 'index.html ', filename:' B .html ', title: 'This is B .html ', // Add the specified chunks: ['main', 'B']}), new htmlWebpackPlugin ({template: 'index.html ', filename: 'c.html', title: 'This is c.html ', // Add the specified chunks: ['main', 'C']})]}

3. Run the following command:

npm run webpack

4. Compile: