Как сделать под категории картинок в папке dist?

Question

[LoveCodeandCoffe]

{ 
        test: /\.(jpg|svg|png|gif|webp)$/,
        use:[ {
          loader: 'file-loader',
          options:  {
            name: '[name].[ext]', // version  1
            // name: '[path][name].[ext]', // version  2
            outputPath: 'img',
            publicPath: '/img',
            
            postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
          }

у меня в проекте такая иерархия картинок в src : src/img/category/fruit/apple.png. , src/img/category/vegetables/tomato.png
при первом варианте в dist получается так
dist/img/scr/img/category/fruit/apple.png
dist/img/scr/img/category/vegetables/tomato.png
ну совсем как-то странно.
При втором лучше
dist/img/tomato.png
dist/img/apple.png
Но все-же хотелось бы чтобы изображения попадали в под категории а не сваливались в одну кучу.
dist/img/category/fruit/apple.png
dist/img/category/vegetables/tomato.png
Как я думаю нужно с [path] достать только часть пути. Но не знаю как это сделать

Answer 1

[Mark Lansky]

options: {
    name: '[path][name].[ext]',
    context: 'src/img',
    outputPath: 'img',
},

Взял из своего webpack шаблона
Этот момент даже описан в документации, что структура и иерархия папок внутри img сохраняется, если что почитай там. Написано без publicPath'ов и посттрансформов, всё просто.
Конфиги тут - webpack.config.dev.js и webpack.config.prod.js