Webpack file-loader duplicating public directory

Question

I am using Webpack to output files into a dist folder.

The directory structure is like so: client/public/dist

inside which bundle.js and styles.css sit.

My file-loader setup is:

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

However what this is doing is putting my images inside another public directory like this:

client/public/dist/public/images

I'd prefer this:

client/public/dist/images

score 0 · Answer 1 · answered Mar 12 '18 at 12:51

0

Solved

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

answered Mar 12 '18 at 12:51

HPJM

517
8
17

Although your code snippet might solve the issue, you should describe what’s the purpose of your code (how it solves the problem). Furthermore, you might want to check https://stackoverflow.com/help/how-to-answer – Ahmad F Mar 12 '18 at 14:17

score 0 · Answer 2 · answered Oct 10 '19 at 02:37

The answer by @hpjm only works if all your files are in a flat directory.

To include subdirectory support:

  {
    include: path.resolve(__dirname, 'assets'),
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
      outputPath: './',
      publicPath: '/',
    },
  }

Webpack file-loader duplicating public directory

2 Answers2