【Web前端问题】webpack如何给不同文件添加不同的公共路径

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

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

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

回答:

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')

}),

回答:

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

以上是 【Web前端问题】webpack如何给不同文件添加不同的公共路径 的全部内容, 来源链接: utcz.com/a/139131.html

回到顶部