m

mun

V1

2022/06/14阅读:28主题:默认主题

webapck打包css背景图

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

开始进入正题

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

.js

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

.css

.bg-img {
    width200px;
    height200px;
    background-urlurl("");
    background-size: contain
}

因为我就是这样的

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

解决办法

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

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

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

你以为这就解决了吗

还真是

注意!

不过有一个点需要注意:配置项 esModule: false type: 'javascript/auto' 适用于 url-loader file-loader

分类:

后端

标签:

后端

作者介绍

m
mun
V1