html模板
<!doctype html> <html> <head> <meta charset="UTF-8"> <!-- 写入title --> <title><%= htmlWebpackPlugin.options.title %></title> <!-- 写入公用JS --> <script> <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry].source() %> </script> </head> <body> <!-- 非公用JS写入 --> <% for (var k in htmlWebpackPlugin.files.chunks) { %> <% if(k !== 'main') { %> <script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script> <% }%> <% } %> </body> </html>
<%= coding %>这个为 htmlWebpackPlugin 官方支持的模板语言
JS模板
var htmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry: { a: './src/js/a.js', b: './src/js/b.js', main: './src/js/main.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js' }, plugins: [ new htmlWebpackPlugin({ title: "我就是标题1", //HTML文档的标题。 filename: "a.html", // 生成的模板文件的名字 template: "index.html", //模板来源文件 inject: false, //不注入，在html模板写入 chunks: ['main','a'] //引入的模块 }), new htmlWebpackPlugin({ title: "我就是标题2", filename: "b.html", template: "index.html", inject: false, chunks: ['main','b'] }) ] };
多页面时，只要new htmlWebpackPlugin() 就可以。