Webpack copyFiles duplicating files from subdirectory into main directory

Viewed 221

I have a directory for images as follows:

enter image description here

Within the icons sub directory I have SVGs to organize the structure.

Within webpack, I specify the following:

.copyFiles({
     from: './assets/images',
     to: '[path][name].[hash:8].[ext]',
     context: './assets'
})

What happens in the build is as follows:

enter image description here

What happens here is it copies all of the icons within the directory and copies it directly into the images directory while also copies the icons directory. It does it twice. Is there a reason why this happens? How do I ensure that it doesn't copy the content twice within webpack?

2 Answers

What are you using to copy files?

Use the copy-webpack-plugin and specify globs in your paths. Take a look at this as a real working example

In your case you would use a glob like ./assets/images/**/* for the source and it should work as expected.

Try the following configuration for images i've running on a project for a long time:

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

it copies the images to ./img/ folder

Related