在 Nunjucks 插件（或加载器）发出的 HTML 中包含 JS（和 CSS）标签

Question

使用 html-webpack-plugin 时，插件可以注入 JS 标签（以及其他标签，如 CSS 等）。

当尝试使用 nunjucks-webpack-plugin (et al) 时，我希望有同样的便利性。

但是，当我使用 nunjucks-webpack-plugin （等）时，我似乎找不到让 Webpack 注入脚本标签的方法。

诚然，我对使用 Webpack 很陌生，所以我可能缺少一些基本的东西。

我已经尝试了各种插件和加载器，以各种链顺序。

使用的加载器和插件： - nunjucks-loader - super-nunjucks-loader - nunjucks-webpack-plugin

这是我想使用的链接类型的示例：

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const NunjucksWebpackPlugin = require("nunjucks-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  // ...
  entry: {
    index: "./src/index.js"
  },
  output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name].[hash].js"
  },
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    new NunjucksWebpackPlugin({
      templates: [
        {
          from: "./src/index.njk",
          to: "_temp_.html"
        }
      ]
    }),
    new HtmlWebpackPlugin({
      template: "_temp_.html",
      filename: "index.html",
      chunks: ["index"]
    })
  ]
  // ...
};

结果将是编译后的 Nunjucks 模板的 HTML，之前注入了 Javascript Script Tag ()。

Answer 1

在nunjucks-webpack-plugin的文档中

webpack 编译变量也被发送到 __webpack__ 下的模板__webpack__ : hash

我们可以使用类似的东西：

<script type="text/javascript" src="/assets/js/index.{{ __webpack__.hash }}.js"></script>