无需修改localhost配置，Webpack如何同时加载本地与CDN图片？

嘿，作为第一次折腾Webpack配置的新手，遇到这种路径问题太正常了！我帮你捋清楚核心问题，然后给出简单可行的解决方案：

问题出在哪？ #

你之前尝试给图片loader硬加了CDN的publicPath，这会导致本地图片的路径也被强制指向CDN——本地开发时localhost根本访问不到CDN上的本地资源，自然加载失败；反过来，如果你直接在代码里写CDN图片的完整URL，其实Webpack本来就不会处理它，浏览器会直接请求CDN地址，可能是你之前的配置混淆了本地资源和CDN资源的处理逻辑。

具体解决步骤 #

我们分两种场景处理，完全不需要修改localhost配置：

1. 本地assets目录图片的适配（开发+生产环境） #

你的配置其实已经做了环境区分的publicPath，只需要调整loader配置，让output的publicPath自动接管路径即可，不需要单独给loader加publicPath：

把你的图片loader改成这样：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  query: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
}

• 开发环境：output.publicPath是config.dev.assetsPublicPath（一般是'/'），本地图片打包后会生成/img/xxx.hash.png的路径，浏览器从localhost:8080/img/xxx.hash.png加载，完美访问本地资源；
• 生产环境：output.publicPath是config.build.assetsPublicPath（你的CDN地址，比如'https://your-cdn.com/'），打包后的图片路径会自动拼接成https://your-cdn.com/img/xxx.hash.png，生产环境直接拉CDN资源。

2. 外部CDN图片的加载 #

直接在代码里用完整的CDN图片URL就行，别用import或require引入，比如在Vue组件里这么写：

<img src="https://asdgasdgasdgasdg.com/img/your-cdn-image.png" alt="CDN图片">

Webpack不会碰这种绝对路径的资源，会原封不动保留在最终代码里，浏览器自动向CDN发请求，完全不影响本地localhost的配置。

要是你非得通过import方式引入CDN图片（真心不推荐，因为Webpack会把资源下载到本地打包，多此一举），可以给Webpack加个externals配置，告诉它别处理这类资源：

module.exports = {
  // ...其他配置
  externals: {
    'cdn-user-avatar': 'https://asdgasdgasdgasdg.com/img/avatar.png'
  }
}

然后代码里这么用：

import avatar from 'cdn-user-avatar'
// 把avatar作为img的src即可

但还是那句话，直接写完整URL更简单。

验证一下 #

1. 本地启动项目，检查本地图片的请求路径是localhost:8080/img/xxx.png，能正常显示；
2. 看CDN图片的网络请求，是直接打向你的CDN域名的，能正常加载；
3. 生产打包后，本地图片的路径自动带上CDN前缀，符合预期。

这样就能完美实现你的需求啦！

内容的提问来源于stack exchange，提问作者mohamed tebry