CODEWITHSUNDEEP
node.jswebpack
Bheem Nishad
Bheem Nishad

Reputation: 19

how to make images directory and sub directory with webpack.

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

Upvotes: 0

Views: 598

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32972

[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/'
}

Upvotes: 2

Related Questions