webpack html-webpack-plugin插件写入行内模式
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() 就可以。
