Question

我在webpack中使用HtmlWebpackPlugin，下面是其配置：

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

在我的html中，将script标记定义为：

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

webpack将<%= htmlWebpackPlugin.options.sdk %>替换为/mylib.js。但是，一旦我按如下所示添加html-loader插件，它就无法工作：

{
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
              options: {
                attrs: 'img:src'
              }
            }
          ]
        }

我使用html-loader的原因是解析html文件上的img src标签。但这与HtmlWebpackPlugin <%= ... %>表达式冲突。我该如何使它们都起作用？

Answer 1

我会尝试html-loader的属性ignoreCustomFragments。根据{{3}}，您可以将其作为选项传递，而加载程序将忽略某些部分，具体取决于RegExp：ignoreCustomFragments: [/<%=.*%>/]

Answer 2

为此我找到的最简单的解决方案是使用.ejs扩展名重命名您的模板。这将插入html-webpack-plugin（因为它是一个后备ejs-loader），然后在处理所有<％=％>之后，它将插入html-loader。

这样，html-webpack-plugin将首先运行，然后运行html loader。

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

Answer 3

您需要结合三个步骤。

首先，您需要HtmlWebpackPlugin。如https://stackoverflow.com/a/56264384/9363857

所示

第二，您激活html-loader。这会导致像这样的行出现奇怪的结果

module.exports=.....

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

因此，第三，您需要将此代码翻译回html，为此您需要添加一个extract-loader。如：

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

`html-loader`覆盖`HtmlWebpackPlugin``<％=％>`表达式

3 个答案: