gpt4 book ai didi

javascript - 修改 HtmlWebpackPlugin 生成的脚本 URL

转载 作者:行者123 更新时间:2023-11-28 12:57:51 25 4
gpt4 key购买 nike

当使用HtmlWebpackPlugin生成dist/index.html文件时,我们可以使用inject选项自动创建<script> javascript 捆绑文件的标签:

new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
// ...
})

并获取一个类似于以下内容的 index.html 文件:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>

对于服务器端约束,我需要在生成的脚本源中添加查询字符串参数,使其看起来像 <script src="index_bundle.js?my-parameter=my-value"></script> 。我一直在看plugin documentation ,但我找不到方法。

是否有任何选项可以通过附加字符串或替换为正则表达式来修改生成的 URL

提前致谢!

最佳答案

您是否考虑过通过向HtmlWebpackPlugin提供您自己的模板来自己做到这一点?它看起来像这样:

webpack.config.js :

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = () => ({
entry: './burrito.js',
output: {
filename: './burrito_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: 'lunch.ejs',
templateParameters: {
query: '?foo=bar&bar=baz'
},
filename: 'lunch.html',
inject: false,
}),
],
});

lunch.ejs :

<html>
<body>
<% htmlWebpackPlugin.files.js.forEach(function(file) { %>
<script src="<%= file %><%= htmlWebpackPlugin.options.templateParameters.query %>"></script>
<% }) %>
</body>
</html>

HtmlWebpackPlugin将公开一个全局变量 htmlWebpackPlugin供您的模板从中读取值。比照。 https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates

当你运行 Webpack 时,它会处理你的 lunch.ejs模板和产品lunch.html :

<html>
<body>
<script src="./burrito_bundle.js?foo=bar&bar=baz"></script>
</body>
</html>

关于javascript - 修改 HtmlWebpackPlugin 生成的脚本 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53351409/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com