在 uni-app 中自定义 webpack loader 处理

如何在 uni-app 中, 使用特定前缀的方式引用图片路径
例如:

background-image: url('@images/aaa.png');

这... 怎么做 没见过啊

这两天接到一个小需求, 同事的项目是 uni-app, 他遇到的问题是, 无法在代码中使用自定义前缀处理图片路径, 本地图片路径可以使用, 但是他想要的是网络路径

// no
resolve: {
  alias: {
    '@images': path.resolve(__dirname, '../src'),
  }
},
// yes
resolve: {
  alias: {
    '@images': 'http://www.xxx.com',
  }
},

同事说他试过, 这样写不行的, en..., 我就没再试, 要不显得多不尊重人(毕竟我俩挨着, 我做什么他眼镜一撇就能看到)

他给我说了他想到的解决办法, 就是在 css 中使用 css 变量, 在 js 中使用 js 变量, 我一听, 可以啊, 这是个可行的办法, 但是...

同事嫌弃这种办法麻烦, 问我能不能使用类似自定义变量的方式写
当面答: 可以! 等会我给你搞
私下: 这咋搞...

自定义 loader ?

突然想到一个方法, 在 webpack 编译之前, 我拦截到源代码并进行一个处理不就完了? 可以搞
具体实现逻辑:
自定义一个 loader, 接受源码并处理, 返回源码, 交给 vue-loader 继续进行原本的处理逻辑

开整

1. 修改 vue.config.js 配置文件
   在 vue-loader 前增加自定义 loader 处理内容

// 不用使用 configurewebpack, 会和 vue-cli 自带的逻辑起化学反应
chainWebpack: (config) => {
  config.module
    .rule('vue')
    .use('vue-loader')
    .end()
    .use('customLoader')
    .loader(path.resolve(__dirname, './customLoader.js'))
    .end();
}

2. 创建 customLoader.js
   使用正则匹配替换vue文件中所有指定格式的图片路径前缀

module.exports = function(source) {
  return source.replace(/@images\//g, 'https://www.xxx.com/');
};

如果使用非 vue-cli 创建的项目, 请手动下载这两个插件
vue-loader vue-template-compiler

撒花完结...

同事看完效果就懵了, 就这?...

附图

image.png image.png