打包配置实现项目中图片分开读取服务端和本地

使用场景介绍

1.当一个项目中的图片分别部署在两个不同的服务器时，
2.或者有的嵌入原生的H5页面，页面中有的图片读取本地项目静态资源，有的读取服务端。
假定项目中src/assets/中有两个文件夹，一个为cdnImg，一个为img分别对应如下：
cdnImg:打包后项目中使用到此文件夹下的图片的地址都要替换成http://123.com。
img: 打包后项目中使用到此文件夹下的图片需要放到项目对应的部署的文件夹下。

涉及的loader

url-loader "version": "2.3.0"
file-loader "version": "4.3.0"
版本不同，源码内部提供的方法不同。

配置代码

以vuecli3.x脚手架搭建的项目为例

const appName = '项目名称'
...
 chainWebpack: config => {
    config.module.rule('images')
      .test(/\.(jpg|png|gif|svg|jpeg)$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 2 * 1024,//低于2KB的图片转Base64
        name: url => {
          // console.log('name',name)
          if ((/\\cdnImg\\.*\.(jpg|png|gif|svg|jpeg)$/).test(url)) {
            // cdnImg下图片存放在dist/cdnImg中
            return `${appName}/cdnImg/[name].[ext]`
          } else {
            // 其他图片存放在dist/img中
            return `${appName}/img/[name].[ext]`
          }
        },
        publicPath: (url, resourcePath, context) => {
          // console.log('publicPath',name)
          if ((/\/cdnImg\/.*\.(jpg|png|gif|svg|jpeg)$/).test(url)) {
            // dist/cdnImg下的图片改用服务器地址请求
            return 'http://cdn.com/' + url.split('/')[url.split('/').length - 1]
          } else {
            // dist/img下的图片需要读取本地
            return `__webpack_public_path__ + ${url}`
          }
        },
        postTransformPublicPath: publicPath => {
          if (publicPath.indexOf('__webpack_public_path__ + ') > -1) {
            return `__webpack_public_path__ + ${publicPath.replace('__webpack_public_path__ + ', '')}`
          } else {
            return publicPath
          }
        }

      })
  }