webpack如何才能替换全部图片url为cdn的地址

Question

想要build的时候把img和css中的图片相对路径替换成cdn的地址，其他资源不改变路径，各位看官可有比较好的方法，publicPath设置了之后是全部资源文件都替换，现在只想替换图片类型的路径

Answer 1

file-loader 里可以配置，publicPath ，过滤对应文件改变其 发布的前缀。
webpack 本身是可以通过 __webpack_public_path__ 动态改变publicPath的，但自己操作不方便，借助loader来区分处理是更好的办法。
file-loader 的配置https://webpack.docschina.org...

Answer 2

谢谢@cs_victor给的思路, 最后捣鼓出来了,
我用的是vue cli3, 较早版本的道理也一样, 根据这个改一下就行

module.exports = {
chainWebpack: config => {
    config
      .module
      .rule("images")
      .test(/\.(jpg|png|gif)$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        // 使文件大小小于此limit值(单位为byte)的文件转换为base64格式
        // 大于此limit的, 会执行options中的fallback配置项插件, fallback默认值为file-loader, 
        // 而url-loader的options配置项也会被传递给file-loader
        limit:10,
        // 根据环境使用cdn或相对路径
        publicPath: process.env.NODE_ENV === 'production' ? 'https://oss.xx.com/img' : './',
        // 将图片打包到dist/img文件夹下, 不配置则打包到dist文件夹下
        outputPath: 'img',
        // 配置打包后图片文件名
        name: '[name].[ext]',
      })
      .end();
}

Answer 3

<img>里的还可以用拼字符串的形式来拼出完整的路径，css里的还真的是无解了

Answer 4

img 和 css 一并放在 cdn。

Answer 5

大神我有点不懂，我现在想把项目中所有图片都加上前缀，现在的图片地址是 <img class="menu-img" :src="mj.img" :alt="mj.name"/> ，配置文件中那个name '[name].[ext]'我应该改成什么啊