我有一个 html 页面，包括一些 css 和 typescript，我用它们来美化一些日志。 我想将所有文件（从打字稿生成的css、html、javascript）捆绑到一个文件中，以便美化的日志完全独立于一个文件中，并且可以轻松交换。
我研究过 webpack，但很难告诉 webpack 转换模板，以便内联编译的打字稿和引用的 css 文件。我不受 webpack 的束缚，如果有人知道更好的工具来完成这项工作。
我的
index.htmltsc -wMWE：
这应该足以构成 MWE 框架来解决问题。我希望
<link rel="stylesheet" href="..."><script src="...">index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LogView</title>
<link rel="stylesheet" href="logview.css">
<link rel="stylesheet" href="eyesymbols.css">
<link rel="stylesheet" href="DropDownButtonSymbolFonts.css"> <!-- apparently adding a font into a shadowdom does not work, so add it to head -->
</head>
<body>
<div id="logview"></div>
<div id="controls"></div>
<script src="logview.js" async defer></script> <!-- Actual logic, logview.ts -->
<script src="DropDownButton.js" async defer></script> <!-- Customelement, backed by DropDownButton.ts -->
</body>
</html>
Webpack 配置：
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
module.exports = {
mode: "development", // TODO: how should we switch this between development and production?
devtool: false, // TODO: what is the correct setting here, to either do no transform or fast builds?
entry: {
dropdown: "./src/DropDownButton.ts",
logview: "./src/logview.ts",
//index: "./src/logview.html",
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
new HtmlWebpackPlugin({
filename: "logview.html",
template: "./src/logview.html",
chunks: [],
inlineSource: ".(js|css)$",
}),
new HTMLInlineCSSWebpackPlugin(),//{filter: () => { return true; }}),
],
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
//"style-loader",
"css-loader",
],
type: "asset/inline",
}
],
},
resolve: {
extensions: [ ".tsx", ".ts", ".js" ],
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
clean: true,
},
};
最佳实践可能是为此目的设计 HTML，方法是编写已正确嵌入 CSS 和 JavaScript 文件作为内联文本的模板（请参阅嵌入式 JavaScript 模板） 例如）。
否则您将需要运行“浏览器控制器”来打开文件、正确解析 DOM 并解析超链接。但要注意：这个方向的解决方案需要不成比例的性能。
我不知道有任何将 CSS 和 JS 作为内联文本插入的简化解决方案。但如果 MHTML 可以接受，您可以轻松使用 Puppeteer 并调用
page.target().createCDPSession()