webpack如何给不同文件添加不同的公共路径

Question

在项目开发中，使用webpack的过程中，遇到了一个问题，就是在css引用静态资源时，和html页面引用js的url中，我想通过output中的publicPath来添加公共路径，但是在css文件和html文件中的公共路径不同，我该怎么去分别添加不同的公共路径？
因为目前我是在本地写样式，但是在线上，图片都是在子域名f域名下，我需要添加例如f.example.com/image/这样的工作路径

在页面中js文件是在s域名下，我需要添加s.example.com/这样的公共路径

但是output.publicPath只会添加一种，我需要添加不同公共路径，这个该怎么解决？

Answer 1

webpack 官方只开了一个publicpath的口子来做这件事情。

下面是官方的源码：

    const publicPath = this.getPublicPath({
                hash: hash
            });
            buf.push("");
            buf.push("// __webpack_public_path__");
            buf.push(`${this.requireFn}.p = ${JSON.stringify(publicPath)};`);
            return this.asString(buf);

建议：

1.可以让服务器端根据资源类型进行代理转发
2.可以自己重写一下插件，可以模仿这个插件MainTemplate。
3.自己在使用资源时候做配置 比如

    __CSSPATH__ + css相对路径
    __OTHERPATH__ + other相对路径

然后使用definePlugin进行配置

new webpack.DefinePlugin({
      __OTHERPATH__:JSON.stringify('http://xxx.xxx.xxx.xxx'),
      __CSSPATH__: JSON.stringify('http://xx.xxx.xxx.xxx')
    }),

Answer 2

output.publicPath值的是打包后文件，插入HTML中的路径地址。css中引入的资源文件地址是不会涉及到的。不知道你用webpack打包什么的，我一直是打包react，开发环境下css都是直接打包到js中，为了使用热更新，生产环境下用ExtractTextPlugin把css单独拿出来。一句话就是，css里面的资源路径，webpack不会影响。