Question

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

我们的图片存储在 images -subdirectory中。根据图像质量，我们在图像目录中有子文件夹。 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 -rules中包含子文件夹？

Answer 1

解决方法是在[path]前面添加文件名：）

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

webpack-url-loader忽略子文件夹

1 个答案: