`html加载器“覆盖”HtmlWebpackPlugin`<；%%=%>；`表达

我正在网页包中使用

HtmlWebpackPlugin

，下面是它的配置：

new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: 'body',
        sdk: '/mylib.js'
      })

在我的

html

中，我将

script

标记定义为：

<script src="<%= htmlWebpackPlugin.options.sdk %>"></script>

---

我使用

htmlloader

的原因是解析html文件上的

imgsrc

标记。但它与

HtmlWebpackPlugin

表达式冲突。如何使这两种方法都起作用？

我会尝试一下html loader的属性

忽略CustomFragments

。根据，您可以将其作为选项传递，加载程序会忽略某些部分，具体取决于RegExp:

ignoreCustomFragments:[/]

我找到的最简单的解决方案是使用.ejs扩展名重命名模板。 这将启动html网页包插件（因为它是一个备用ejs加载程序），然后在它处理完所有的代码后，它将启动html加载程序

这样，html网页包插件将首先运行，然后是html加载程序

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html.ejs',  // don't forget to rename the actual file
    inject: 'body',
    sdk: '/mylib.js'
  })

---

您需要结合三个步骤

首先，您需要HtmlWebpackPlugin。如

第二步，激活html加载程序。这导致了一个奇怪的结果，那就是有一条像

module.exports=.....

在html的中间（替换require），这并不是您真正想要的

因此，third，您需要将其翻译回html，并为此添加一个提取加载器。例如：

test: /\.(html)$/, use:  [ 'extract-loader',  { loader: 'html-loader' } ] 

test: /\.(html)$/, use:  [ 'extract-loader',  { loader: 'html-loader' } ]