我有一个 React 应用程序，公共文件夹中有一个 index.html 文件：
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test</title>
<link rel="dx-theme" data-theme="generic.dark" href="/css/some.css" data-active="false">
<base href="/" />
</head>
<body class="dx-viewport">
<div id="root"></div>
<script src="/scripts/some-script.js"></script>
</body>
</html>
HtmlWebpack插件设置：
new HtmlWebpackPlugin({
favicon: 'public/faviconDOCs.ico',
template: 'public/index.html',
scriptLoading: 'blocking',
minify: {
removeComments: true,
},
}),
结果，Webpack 在 dist 文件夹中生成以下 index.html：
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="dx-theme" data-theme="generic.dark" href="/css/some.css" data-active="false">
<base href="/">
<link rel="icon" href="/faviconDOCs.ico">
</head>
<body class="dx-viewport">
<div id="root"></div>
<script src="/scripts/some-script.js"></script>
<script src="/main.bundle.0cec3d5e983e6fa0c00b.js"></script>
</body>
</html>
但我需要将其包含在所有捆绑脚本之后。我怎样才能实现这个目标？
我尝试添加 templateParameters 和 additionalScript
new HtmlWebpackPlugin({
favicon: 'public/faviconDOCs.ico',
template: 'public/index.html',
scriptLoading: 'blocking',
inject: 'body', // Scripts are added at the end of the body
minify: {
removeComments: true,
},
templateParameters: {
additionalScript: '<script src="/tflex-viewer/tflex-viewer3d-widget.js"></script>'
}
}),
和 html...
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test</title>
<link rel="dx-theme" data-theme="generic.dark" href="/css/some.css" data-active="false">
<base href="/" />
</head>
<body class="dx-viewport">
<div id="root"></div>
<%= additionalScript %>
</body>
</html>
但是输出是一样的
<body class="dx-viewport">
<div id="root"></div>
<script src="/tflex-viewer/tflex-viewer3d-widget.js"></script>
<script src="/main.bundle.0cec3d5e983e6fa0c00b.js"></script>
</body>
如何使脚本包含在index.html中所有脚本的末尾？
提前谢谢您。
HtmlWebpackPlugin 在 head 或 body 标签的底部添加
<script>尝试使用现代的 html-bundler-webpack-plugin。
使用此插件，您可以在任意位置直接以 HTML 形式指定所有源文件。该插件解析模板中资源的源文件，并在生成的 HTML 中将其替换为正确的输出 URL。定义的
<script>例如有HTML模板：
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test</title>
<!-- relative path to favicon source file -->
<link href="../images/favicon.ico" rel="icon" />
<!-- relative path to SCSS source file -->
<link href="../scss/style.scss" rel="dx-theme" data-theme="generic.dark" data-active="false">
<!-- relative path to JS source file -->
<script src="../vendor/main.js" defer="defer"></script>
</head>
<body class="dx-viewport">
<div id="root"></div>
<!-- relative path to JS source file -->
<script src="../vendor/tflex-viewer/tflex-viewer3d-widget.js"></script>
<!-- relative path to JS source file -->
<script src="../scripts/some-script.js"></script>
</body>
</html>
最小 Webpack 配置：
const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlBundlerPlugin({
entry: {
// template file relative to the Webpack config file
index: 'public/index.html', // save generated HTML into dist/index.html
},
js: {
filename: 'js/[name].[contenthash:8].js', // JS output filename
},
css: {
filename: 'css/[name].[contenthash:8].css', // CSS output filename
},
}),
],
module: {
rules: [
{
test: /\.s?css$/,
use: ['css-loader', 'sass-loader'],
},
{
test: /\.(ico|png|jp?g|svg)/,
type: 'asset/resource',
generator: {
filename: 'img/[name].[hash:8][ext][query]',
},
},
],
},
};
生成的 HTML 包含资产的哈希输出 URL。 所有
<script><!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test</title>
<link href="img/favicon.1a2b3c4d.ico" rel="icon" />
<link href="css/style.1234abcd.css" rel="dx-theme" data-theme="generic.dark" data-active="false">
<!-- compiled source file: vendor/main.js -->
<script src="js/main.adcb4321.js" defer="defer"></script>
</head>
<body class="dx-viewport">
<div id="root"></div>
<!-- compiled source file: vendor/tflex-viewer/tflex-viewer3d-widget.js -->
<script src="js/tflex-viewer3d-widget.adcb4321.js"></script>
<!-- compiled source file: scripts/some-script.js -->
<script src="js/some-script.adcb4321.js"></script>
</body>
</html>
使用此插件，您不需要在 Webpack
entry