关于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