文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在webpack注入的脚本后加载脚本标签？

问如何在webpack注入的脚本后加载脚本标签？
EN

Stack Overflow用户

提问于 2020-11-28 19:43:12

回答 1查看 828关注 0票数 3

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

这是我的结构：

我希望这样做，即首先加载transformable.js，然后使用脚本标记：

这是我的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"
}

javascript

typescript

webpack

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-29 16:46:25

HTMLWebpackPlugin是一个注入脚本和样式标签的工具，你可以禁用这个行为，并使用内置的标签来定位你想要的标签。

<!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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65049193

复制

相似问题

问如何在webpack注入的脚本后加载脚本标签？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在webpack注入的脚本后加载脚本标签？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在webpack注入的脚本后加载脚本标签？
EN