webapck打包css背景图

mu0nian

于 2022-06-14 10:03:23 发布

阅读量236

点赞数 2

文章标签：前端

本文链接：https://blog.youkuaiyun.com/mu0nian/article/details/125272777

版权

本文介绍了在Webpack打包过程中遇到CSS背景图不显示的问题及解决办法。官方建议避免使用`url()`和`~url()`，因为它们基于ES6规范。通过修改Webpack配置，启用`esModule`属性可以解决这个问题。然而，配置项`resolve.urlLoaderOptions.limit`的设置对于小于特定大小的图片仍然适用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天你听歌了吗？今日推荐诛心

开始进入正题

我相信你的测试代码是这样写的

.js

const el = document.createElement("div");
el.className = "bg-img";
document.body.appendChild(el)

.css

.bg-img {
    width: 200px;
    height: 200px;
    background-url: url("");
    background-size: contain
}

因为我就是这样的

结果就是我打包后，在页面中不显示那么话不多说

解决办法

官方说过了，在 webpack5就不再推荐使用 file-loader 和 url-loader 因为他俩都是采用的 ES6语法规范，而不是 CommonJs 规范那么我们可以通过 esModule 属性来关闭ES6语法

我们直接上代码 webpack.config.js

  module: {
    // 配置规则
    rules: [
      // 配置 file-loader
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: {
          loader: 'file-loader',
          options: {
            esModule: false
          }
        },
        type: 'javascript/auto'
      }
    ]
  }