关于webpack:background-urlobject-Module背景图无法加载urlloader压缩图片配置问题

问题形容

在vue.config.js文件中应用url-loader压缩图片当前，启动我的项目，发现背景图加载不进去了，F12审查dom发现背景图的的url变成对象模块了，如下图：

问题剖析

url-loader应用的是ES的模块化语法，就是import 'xxx'；如下官网文档截图：

可是vue在被编译后，应用的是CommonJS模块化语法，就是require('xxx')。二者有抵触，不统一，就会导致无奈读取图片文件了。

解决方案

• 既然是vue我的项目，就让url-loader的配置与vue保持一致即可，所以敞开esModule，应用vue的规定即可。
• 既然esModule选项默认为true，那么改为false就行了（敞开了es模块化语法）`

^_^

代码如下

chainWebpack(config) {
    // ......
    config.module.rule("images").test(/\.(jpg|jpeg|png|gif|ico)$/) 
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit: 1024 * 12,
        name: "static/img/[name].[ext]",
        esModule: false // 这里，置为false即可
      })
}

A good memory is better than a bad pen. Write it down