how to make images directory and sub directory with webpack. - node.js

Question

I am using Nodejs for web application development and webpack as bundler.My code is here:
Directory Structure is:
main.js
src
- js
- styles
- images
-logo.png
-clients_logo
- client_logo1.png
- client_logo2.png
-----------------------------------
public (Use for output)
- js
- css
- images
webpack.config.js
module.exports = {
entry: './main.js',
output: { path: path.join(__dirname, './public/'), filename: './js/bundle.js' },
module: {
loaders: [
{ test: /\.(jpg|jpeg|gif|png)$/,loader:'url-loader?limit=1024&name=images/[name].[ext]' }
]
}
};
main.js
import './src/images/logo.png';
require.context('./src/images/clients_logo/', true);
when I am compile this code using webpack --progress --colors command out put is:
public
- images
- logo.png
- client_logo1.png
- client_logo2.png
But Required out put is:
public
- images
- logo.png
- clients_logo
- client_logo1.png
- client_logo2.png
I am also use
{ test: /\.(jpg|jpeg|gif|png)$/,loader:'url-loader?limit=1024&name=[path][name].[ext]?[hash]&context=/path' }
but it's out put is:
public
- images
- src
- images
- logo.png
- clients_logo
- client_logo1.png
- client_logo2.png
So any one to understand this problem and have solution for it,Please provide it.Thanks

Answer 1

[path] is the relative path of the sources, which in your case is src/images/logo.png and so on for the other images. With context the [path] becomes relative to that path. Setting context=src/ will change that [path] to images/logo.png, which is exactly what you want.
So you can change your config to:
{
test: /\.(jpg|jpeg|gif|png)$/,
loader: 'url-loader?limit=1024&name=[path][name].[ext]&context=src/'
}