我对 JS 和 webpack 很陌生，我正在尝试在我的项目中对页眉和页脚使用部分内容，以免到处重复它们。
我的第一个方法是安装
html-loader<%= require('html-loader!./assets/html/header.html') %>
只有当我不在 webpack 配置中为 html 文件添加任何规则时（我想如果我这样做，它会干扰
HtmlWebpackPlugin[object Module]
我在网上没有找到任何好的解释（与html文件案例相关）。
我有一个好的方法吗，或者还有其他更简单的方法吗？我将在任何地方都包含这些部分，但我不排除为我想在特定页面中使用的内容创建部分。
更简单的方法是使用 html-bundler-webpack-plugin。该插件支持许多“开箱即用”的模板引擎（Eta、EJS、Handlebars、Nunjucks、LiquidJS）。默认模板引擎是最快的 Eta（类似 EJS）。
简单的用法，干净的语法，例如，./src/views/index.html
<html>
<head>
<!-- specify a source style file, relative to html file -->
<link href="../scss/styles.scss" rel="stylesheet" />
<!-- specify a source script file, relative to html file -->
<script src="../js/main.js" defer="defer"></script>
</head>
<body>
<!-- specify a source partial file, relative to project path -->
<%~ include('/src/views/header.html') %>
<h1>Hello World!</h1>
<!-- specify a source image file, relative to html file -->
<img src="../images/picture.png" />
<!-- specify a source partial file, relative to project path -->
<%~ include('/src/views/footer.html') %>
</body>
</html>
最小的 Webpack 配置：
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
plugins: [
new HtmlBundlerPlugin({
entry: {
// define templates here
index: './src/views/index.html', // => dist/index.html
},
}),
],
module: {
rules: [
{
test: /\.(css|sass|scss)$/,
use: ['css-loader', 'sass-loader'],
},
{
test: /\.(ico|png|jp?g|webp|svg)$/,
type: 'asset/resource',
generator: {
filename: 'img/[name].[hash:8][ext]',
},
},
],
},
};
注意 入口点是一个 HTML 文件。所有源脚本和样式文件都应直接在 HTML 中指定。 该插件解析 HTML 模板中的所有源文件，并用生成的 HTML 中的输出文件名替换引用。
无需额外的插件和加载程序。