I connected the file-loader to the webpack build process in this way.

{ test: /\.(jpe?g|png|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: "[name].[ext]", outputPath: "img", useRelativePath: true, } }, { loader: 'image-webpack-loader', options: { mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false, }, pngquant: { quality: '65-90', speed: 4 }, gifsicle: { interlaced: false, }, svgo: { enabled: false, } } } ] },

Before processing, the pictures lie along this path:

 --src ----img ------logo.jpg ------backgrounds --------img1.jpg --------img2.jpg ------icons --------icon1.svg --------icon2.svg

After processing, the pictures will be saved along this path, i.e. structure is not saved:

 --dist ----img ------logo.jpg ------img1.jpg ------img2.jpg ------icon1.svg ------icon2.svg

I tried to do this: name: "[folder]/[name].[ext]" ,

All pictures in internal folders are saved correctly, i.e. the structure is preserved, but for those images that were originally in src/img , a folder is created in dist/img , i.e. it turns out so dist/img/img/logo.png

To make it clearer:

 --dist ----img ------img --------logo.jpg ------backgrounds --------img1.jpg --------img2.jpg ------icons --------icon1.svg --------icon2.svg

How to fix?

    2 answers 2

    1. Instead of [folder] try using [path] (the slash should be omitted)
    2. When you use [path] or [folder] do not use outputPath: "img", you have further useRelativePath: true,

    PS In case you will use [path][name].[ext] may need to omit the useRelativePath: true, option useRelativePath: true,

    Example:

      test: /\.(png|jpe?g|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: '[path][name].[ext]', }, }, ],

    Transfer to a specific folder while maintaining the structure:

      test: /\.(png|jpe?g|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: 'dist/[path][name].[ext]', }, }, ],

    Maybe link to examples will help: https://webpack.js.org/loaders/file-loader/#examples

    • Such a dist / src / img structure is formed, and only then what is needed, for some reason, it creates the src folder at prntscr.com/nd2bz5 in the dist folder - uzi_no_uzi
    • @uzi_no_uzi I'm a little confused. :) Can you clarify? The dist folder strains? - alex Roosso pm
    • I updated the answer by adding an example. Try it. - alex Roosso 3:29 pm

    In the name option, specify '[path][name].[ext]' , and outputPath and useRelativePath .