0

I use webpack 3 and file-loader. I need a copy directory '/images/**' with the same relative path and files to my build directory.

For example:

I have 'src/images/icon/', 'src/images/bg/', 'src/images/temp/*' etc. And I need copy the same structure in my 'dist/images'?

How can I do it ... because right now any options what I used just create one directory 'images' and I can't find the way to copy all structure with all files included there. Can the 'file-loader' do it?

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
        outputPath: 'images',
    }
}

Thanks

Kikambus
  • 1
  • 1
  • 2
  • You can provide a custom function to manipulate the path to your needs. Refer to the docks which provide an example, too: https://github.com/webpack-contrib/file-loader#outputpath – Matthi Jan 24 '20 at 14:41
  • Thanks! But I do it in another way. I must use another tool for that. In a comment below. – Kikambus Jan 29 '20 at 13:12
  • I see. I did not recognise that you really want to copy without any further processing. Then webpack-copy is the right one for you! – Matthi Jan 29 '20 at 15:53

1 Answers1

0

Solved it. Maybe it helps someone.

The secret was in understanding the difference between 'file-loader' 'and 'webpack-copy-plugin'.

— 'file-loader' works with files what you call from js/css etc. (in background from css for example) —'webpack-copy-plugin' works with ruls like "what copy" and "where to copy".

So, for my case I need use 'webpack-copy-plugin' that's solves the issue.

But also, I must configure the 'file-loader' to save the file name without hash with default configuration.

So here is my case:

module: {
    rules: [
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: 'images/[name].[ext]',
                publicPath: 'images',
                outputPath: 'images'
            }
        }
    ]
},

plugins: [
        {
            from: 'src/images',
            to: 'images',
            force: true
        }
    ])
],

This setting completely saves your source code with image path dependencies, as well as their names

Kikambus
  • 1
  • 1
  • 2