webpack打包如何统一js和css中图片资源路径

Question

在webpack打包项目时经常要处理资源的路径问题，而通常处理方案有以下几种

1. 不设置publicPath，生成基于页面的相对路径
2. 设置publicPath，可设置相对路径和绝对路径
3. 设置__webpack_public_path__，js中资源路径使用该变量， css中资源未使用

项目路径：

开发环境因为都是基于/根目录所以怎么设置都OK，到了测试环境和生产环境路径就无法做到适配了。

开发环境页面地址：http://localhost:8080/index.html
开发环境资源路径：http://localhost:8080/[js|css|img]

---

测试环境页面地址：http://www.test.com/webapp/aaa/index.html
测试环境资源路径：http://cdn.test.com/static/aaa/[js|css|img]

---

生产环境页面地址：http://www.prod.com/webapp/aaa/index.html
生产环境资源路径：http://cdn.prod.com/static/aaa/[js|css|img]

---

问题: 对于测试环境和生产环境只会打包一次，如何做到js和css里面的img路径能适配不同的环境呢？

解决该问题首先有几个要点

1、页面和资源的域名和路径都不同，不能简单的使用相对路径
2、js中的相对路径是针对当前页面，css中的相对路径是针对当前css文件
3、js可以定义资源路径前缀变量，css无法使用
4、可以针对资源类型可以单独设置publicPath

问题解决思路

1、js中的资源路径用引入外部变量，
比如： var imgPath = window.staticPath; //window.staticPath由后台向index.html注入
由<img alt="" src="../assets/xx.png" />
改为<img alt="" :src="'${imgPath}/img/xx.png'" />

改成动态的src缺点就是webpack不能识别这个动态拼接的地址就无法把assets下的图片打包的dist/img路径下，当然有个小技巧是两个src都设置。

2、js中设置__webpack_public_path__变量
比如：__webpack_public_path__ = window.resourcePath; //window.resourcePath由后台向index.html注入
js中img写法不变<img alt="" src="../assets/xx.png" />

该方式的缺点css中的img url不能使用

3、webpack中配置images rule的publicpath，

{ 
  name: 'img/[name].[ext]',
  publicPath:'../',
  limit: 1024
}

因为publicPath优先级会大与__webpack_public_path__
所以缺点是js中的img src同样会用此publicpath，而js中的相对路径是基于当前页面

4、后面翻file-loader源码发现publicpath，其实可以定义为一个function，
所以有了一个很傻的办法，动态设置publicpath

{ 
  name: 'img/[name].[ext]',
  publicPath: function(url){
    if(assetsUtil.useWebpackPath(url)){
      return `__webpack_public_path__ + ${JSON.stringify(url)}`
    }

    return '../'
  },
  limit: 1024
}

缺点就是需要维护哪些资源使用绝对路径，哪些使用相对路径

综上，目前还没有一个很有效便捷的方法解决该问题。希望有遇到该问题的朋友提点方案和建议。

Answer 1

目前项目应用的是vue-cli,自行修改了部分配置.三个环境的情况跟你差不多,测试/生产环境的层级比你还深。
先说下修改了哪些配置
1-build/utils.js下的cssLoaders内的generateLoaders方法内部的

// Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' //此处修改是矫正iview的font等文件夹打包路径错误
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

2-webpack.base.conf.js下的module对象内的rules针对图片类型的配置

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: utils.assetsPath('img/[folder]/[name].[ext]')
          // [folder]/ 是为了保留项目组件文件夹内部资源文件夹
          // 在打包后在img文件夹里面对应生成相同的文件夹,方便维护
          // 另外取消了图片的hash
        }
      },

3-config/index.js
dev的配置就不说了,改了端口,偶尔会修改下默认启动的lolocalhost用于移动调试
主要是build下的

assetsPublicPath: './',//改为./

目前这套配置运行良好.图片那里的修改你可以照样引用原本的cli配置.我这是根据项目需求变动的.
assetsPath如下

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}