我正在尝试导入 HTML 文件来创建某种基本模板。
设置使用 webpack 来捆绑我的 JS。
我尝试过研究 HtmlWebpackPlugin 和其他一些插件，但他们从未展示过此用例的示例。
是否有一个简单的选项可以用来插入 HTML 模板引擎，允许我在 HTML 文件中使用包含内容？如果是的话，它是什么？我该如何设置？
index.html
<html>
<body>
<!-- I want to include templates here -->
<!-- I want to include templates here -->
<!-- I want to include templates here -->
<script src="bundle.main.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './dev/js/main.js',
output: {
path: path.resolve(__dirname, './build/js'),
filename: 'bundle.main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: '/node_modules/',
use: {
loader: 'babel-loader',
}
},
{
test: /\.ejs$/,
loader: 'ejs-html-loader'
}
]
},
stats: {
colors: true
},
devServer: {
contentBase: path.join(__dirname, "dev"),
compress: true,
},
devtool: 'source-map'
};
正如你所看到的，我正在尝试让 ejs 正常工作，但没有成功。我不一定需要使用 ejs 这只是一个例子。
我觉得我错过了一步。
如果有人可以在这里帮助我，我将非常感激。
我可能晚了6年才回答这个问题，但今天我在寻找相同答案时偶然发现了它。最终，我自己找到了答案，所以我决定将其发布在这里，以防其他人遇到这个问题。
我将 HtmlWebpackPlugin 与 Node.js 中的 fs 模块结合使用。 webpack.config.js 文件看起来像这样：
'use strict'
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
...
// Read partials
const partial = fs.readFileSync('./src/partials/partial.html', 'utf8');
module.exports = {
mode: 'development',
entry: {
bundle: path.resolve(__dirname, 'src/js/index.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name][contenthash].js',
clean: true,
assetModuleFilename: '[name][ext]'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Index - title',
partial: partial,
filename: 'index.html',
template: 'src/index.html'
}),
new HtmlWebpackPlugin({
title: 'Template1 - title',
partial: partial,
filename: 'template1.html',
template: 'src/template1.html'
}),
...
],
module: {
rules: [
...
]
},
...
}然后，要访问上面在 index.html 或 template1.html 中指定的 HtmlWebpackPlugin 选项，我们只需将其添加到 HTML 文件中：
<body>
...
<%= htmlWebpackPlugin.options.partial %>
...
</body>
在示例中还可以看到，HTML 标题是在 webpack.config.js 文件中定义的，并且 HTML 中使用的值如下：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
</head>
对于原始问题的用例，我直接从 partial.html 文件将 HTML 重定向为字符串，并使用 fs 模块读取它并将其分配给变量：
const partial = fs.readFileSync('./src/partials/partial.html', 'utf8');
我希望有人觉得这很有用。另外，如果其他人知道更好的方法，请分享！