我们需要建立一个Web应用程序？
- html文件或模板
- 样式源文件
- JavaScript源文件
- webpack编译资源
- html-bundler-webpack-plugin编译包含源样式，脚本，图像等的引用的HTML模板等。
使用HTML bundler plugin for Webpack，您可以直接在模板中直接指定样式，脚本，图像和其他资源的源文件。该插件检测所有source files并用处理资源的输出文件名代替它们。
此插件支持任何templating engine“开箱即用”，例如：EJS，Eta，Handlebars，Nunjucks等。您不需要其他插件和加载程序。
简单用法示例
将源脚本和样式直接添加到HTML：
<html>
<head>
<!-- specify source style files -->
<link href="./style.scss" rel="stylesheet">
<!-- specify source script files here and/or in body -->
<script src="./main.js" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
<!-- specify source image files -->
<img src="./map.png">
</body>
</html>
将模板文件添加到entry插件选项中的webpack.config.js：
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
plugins: [
new HtmlBundlerPlugin({
// define a relative or absolute path to template pages
entry: 'src/views/',
// OR define templates manually
entry: {
index: 'src/views/home.html', // => dist/index.html
'news/sport': 'src/views/news/sport/index.html', // => dist/news/sport.html
},
js: {
// output filename of JS
filename: 'assets/js/[name].[contenthash:8].js',
},
css: {
// output filename of CSS
filename: 'assets/css/[name].[contenthash:8].css',
},
}),
],
module: {
rules: [
{
test: /\.(css|sass|scss)$/,
use: ['css-loader', 'sass-loader'],
},
{
test: /\.(ico|png|jp?g|svg)$/,
type: 'asset/resource',
generator: {
filename: 'assets/img/[name].[hash:8][ext][query]',
},
},
],
},
};
可选您可以使用js.filename和css.filename插件选项定义JS和CSS的输出文件名。
生成的HTML包含处理后源文件的输出文件名，而script和link标签保留在原位：
<html>
<head>
<link href="assets/css/style.05e4dd86.css" rel="stylesheet">
<script src="assets/js/main.f4b855d8.js" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
<img src="assets/img/map.58b43bd8.png">
</body>
</html>
现在，您可以将模板用作入门点轻松将所有源资源绑定到HTML。
注意
功能强大的
html-bundler-webpack-plugin可独立地工作，没有其他插件和加载器，例如：html-webpack-plugin，mini-css-extract-plugin，html-loader，html-loader，style-loader，don't install them。
快速启动，您可以使用multiple pages boilerplate。
完整的文档，其中包括示例，请参见GitHub。