gpt4 book ai didi

javascript - webpack注入(inject)脚本后如何加载脚本标签?

转载 作者:行者123 更新时间:2023-12-04 03:46:47 25 4
gpt4 key购买 nike

Webpack 自动插入 transformable.js在 body 标签的末尾。我想在 <script src="transformable.js"></script> 之后有一个脚本.我怎样才能做到这一点?

这是我的结构:

enter image description here

我想要这个,即加载 transformable.js首先然后有脚本标签:

enter image description here

这是我的 webpack 配置:

import path from "path"
import HtmlWebpackPlugin from "html-webpack-plugin"

export default {
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.tsx?$/,
loader: "babel-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
output: {
path: path.resolve(__dirname, "dist"),
filename: "transformable.js",
sourceMapFilename: "[name].js.map"
},
devtool: "source-map"
}

最佳答案

HTMLWebpackPlugin 是注入(inject)脚本和样式标签的插件,您可以禁用此行为,并使用内置标签根据需要定位标签。

<!DOCTYPE html>
<html>
<head>
<%= htmlWebpackPlugin.tags.headTags %>
<title>Custom insertion example</title>
</head>
<body>
All scripts are placed here:
<%= htmlWebpackPlugin.tags.bodyTags %>
<script>console.log("Executed after all other scripts")</script>
</body>
</html>
// webpack.config.js
module.exports = {
context: __dirname,
entry: './example.js',
output: {
path: path.join(__dirname, 'dist/webpack-' + webpackMajorVersion),
publicPath: '',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
inject: false, // <--- this disables the default injection
})
]
};

一个工作示例:https://github.com/jantimon/html-webpack-plugin/blob/master/examples/custom-insertion-position/webpack.config.js

关于javascript - webpack注入(inject)脚本后如何加载脚本标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65049193/

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