Webpack 不加载内联背景图像答案

【问题标题】：Webpack doesn't load inline background-imageWebpack 不加载内联背景图像
【发布时间】：2020-09-03 09:50:31
【问题描述】：

这是图片加载器的规则

      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },

这是 html 加载器的规则

test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true
            }
          }

除了内嵌的背景图片外，其他所有图片都可以正常加载

<div class="ms__slide" style="background-image: url('../images/slider-bg.jpg')">

      </div>

【问题讨论】：

您如何使用您的模板？看起来你也必须使用这个加载器webpack.js.org/loaders/html-loader
我也使用这个加载器，一切正常，我只需要内联背景图像也可以加载
此选项webpack.js.org/loaders/html-loader/#attributes 允许您要求在构建中提取图像。它应该可以工作。你能分享更多关于你的代码的信息吗？
你为什么不编辑你的问题？我也很想知道你在哪里导入你的 html？
我编辑了它，你的意思是我在哪里导入我的html？

标签： javascript html webpack

【解决方案1】：

还添加一个 css 加载器：

npm install --save-dev css-loader

规则部分的某处：

{
    test: /\.css$/,
    loader: 'css-loader' 
}

【讨论】：

我有我需要的所有加载器，问题只是背景图像
只有当url()在css中才有效，对内联css无效