2

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

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是解析img srchtml 文件上的标签。但它与HtmlWebpackPlugin <%= ... %>表达冲突。我怎样才能让它们都工作？

4

3 回答 3

1

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

这样 html-webpack-plugin 将首先运行，然后是 html 加载器。

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html.ejs',  // don't forget to rename the actual file
    inject: 'body',
    sdk: '/mylib.js'
  })
于 2019-05-22T20:17:58.353 回答
0

您需要结合三个步骤。

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

其次，您激活 html-loader。这会导致奇怪的结果，比如

module.exports=.....

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

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

test: /\.(html)$/, use:  [ 'extract-loader',  { loader: 'html-loader' } ]
于 2019-05-26T11:15:45.737 回答
0

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

于 2019-02-03T23:32:31.133 回答