webpack-url-loader 忽略子文件夹答案

【问题标题】：webpack-url-loader ignores subfolderswebpack-url-loader 忽略子文件夹
【发布时间】：2018-05-07 07:54:35
【问题描述】：

我们目前正在为 vue.js 应用程序扩展构建管道，并且对我们的 webpack 配置有一些挑战。

我们的图像存储在 images 子目录中。根据图像质量，我们在 image 目录中有子文件夹。 url-loader 似乎不够聪明，无法包含子文件夹，因此我们尝试为每个子文件夹定义额外的规则。

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

不幸的是，结果并不令人愉快，因为 image 目录中的所有图像也将放置在子文件夹中，而存储在基本目录中的所有图像似乎在我们的 dist 文件夹。

我们如何在 url-loader-规则中包含子文件夹？

【问题讨论】：

我遇到了同样的问题。你找到解决办法了吗？
@Borjante 很难找到合适的解决方案。我的最终方法是基于此线程 (stackoverflow.com/questions/47677256/…) 中的技术。但是，在构建过程完成后，需要覆盖样式表中的最终路径。我们用我们的部署脚本（一个 c# linqpad-script）做到了。
不可能，我的朋友，最后发现它很简单。检查我的答案

标签： javascript webpack vue.js

【解决方案1】：

解决方案是在 [path] 前面加上文件名:)

{
  test: /\.(png|gif|jpg|jpeg)$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: '[path][name].[ext]?[hash]',
    publicPath: isProd ? 'https://d267jrn1ysxlb3.cloudfront.net' : ''
  }
},

【讨论】：

非常感谢 Borjante！这样就完成了。