`HTML-loader`覆盖`HtmlWebpackPlugin```表达

问题描述 投票:0回答:1

我在使用的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 <%= ... %>表达冲突。我怎样才能让他们两人的工作?

webpack webpack-4 html-webpack-plugin webpack-html-loader
1个回答
0
投票

我想给HTML装载机的财产ignoreCustomFragments一试。按照docs,你可以把它作为一个选项,装载机忽略了一些零件,取决于正则表达式:ignoreCustomFragments: [/<%=.*%>/]


0
投票

我发现最简单的解决方法是重命名.ejs extention您的模板。这将在HTML-的WebPack-插件踢(因为它是一个回退EJS装载机),再经过它处理所有的<%=%>它会在html装载机踢。

这样,HTML-的WebPack-插件将运行,然后再其次是HTML装载机。

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

0
投票

您需要将三个步骤。

首先,你需要HtmlWebpackPlugin。如https://stackoverflow.com/a/56264384/9363857指示

其次,你激活HTML装载机。这导致具有线的奇怪结果类似

module.exports=.....

在HTML的中间(更换需要),这是不是真的,你想要什么。

所以,第三,你需要翻译这回HTML,而您需要添加一个提取装载机。如:

test: /\.(html)$/, use:  [ 'extract-loader',  { loader: 'html-loader' } ] 
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.