当老的项目中存在这种图片引入方式

const icon = require('@/assets/image/xxx')
import icon from '@/assets/image/xxx'

因为图片太占用体积,需要使用网络图片替换,无需修改代码。

babel-plugin-replace-image.js

require('dotenv').config()
const t = require('@babel/types');

// 微信小程序打包

const OSS_HOST = process.env.OSS_HOST;
console.log('OSS_HOST', OSS_HOST) //
/**
 * 替换图片路径插件
 */
module.exports = function () {

  return {
    visitor: {
      // 1.在微信小程序打包情况下,修改图片地址为oss地址
      ImportDeclaration(path) {
        try {
          const { node } = path;
          const { value } = node.source;
          if (value.startsWith('@/assets/image')) {
            const name = node.specifiers[0].local.name;
            const url = value.replace('@/assets/image', `${OSS_HOST}/assets/image`);
            // const bg = 'xxxx'
            path.replaceWith(t.variableDeclaration('const', [t.variableDeclarator(t.identifier(name), t.stringLiteral(url))]));
          }
        } catch (e) {
          console.error('import方式图片url替换失败');
        }
      },
      CallExpression(path) {
        const { node } = path;
        const { callee, arguments: args } = node;
        try {
          if (callee.type === 'Identifier' && callee.name === 'require' ) {
            const value = args[0].value;
            if (value.startsWith('@/assets/image')) {
              path.replaceWith(t.stringLiteral(value.replace('@/assets/image', `${OSS_HOST}/assets/image`)));
            }
          }
        } catch (e) {
          console.error('require形式图片url替换失败');
        }
      },
    }
  };
}

babel.config.js 引入使用

const path = require('path');

module.exports = {
  // ...
  plugins: [
    path.resolve(__dirname, "./babel/babel-plugin-replace-image"),
  ]
  // ...
};

可以手动将资源文件上传到oss或者使用脚本上传