Webpack 图标放入不同的文件夹

Question

我有两个文件夹 src/images/ 和 src/images/icons。所有网站图标均采用 png 格式。

在 src/images/icons 中，我将不同设备的所有图标放入 wwwroot/images/icons，将所有其他图像放入 wwwroot/images。

如何将图片和网站图标分开？

现在我有图片：

 {
            test: /\.(png|ico|svg|jpg|gif)$/,
            use: [
                'file-loader?name=/images/[name].[ext]'
            ]
        },

但这会将所有图像复制到 dist\images，包括图标，它们应该在文件夹 dist\images\icons

中更深一层

Answer 1

有几种方法可以做到这一点（即使用 test 键对文件名、单独的规则等）。但是，这里有一种方法似乎运作良好且相当清楚：

const path = require('path')

module.exports = {
  // ...
  module: {
    rules: [

      {
        test: /\.(png|ico|svg|jpg|gif)$/,
        exclude: /node_modules/,
        use: {
          loader: 'file-loader',
          options: {
            name: function(fullPath) {
              return path.relative(__dirname + '/src', fullPath)
            }
          }
        }
      }

    ]
  }
  // ...
}

Webpack 图标放入不同的文件夹

Webpack favicons into different folder

webpack-3