Specify destination folder in url-loader for webpack

Question

I have images path in css like url(images/image1.jpg) and the loader is defined as

{ test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loader: 'url-loader?limit=1&name=images/[name].[ext]' },

The issue I am facing is that after build process the images are copied to respective folder but the path is pointing to images/image1.jpg relative to the css file location. I want it to be relative to the root directory.

I tried adding a leading / in the name query parameter and it partially fixed the issue

{ test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loader: 'url-loader?limit=1&name=images/[name].[ext]' },

but when I move my files into a sub folder it still points to the root of the domain instead of the folder.

Can you tell me what I am missing in the configuration?

Here is the webpack configuration

'use strict';

var webpack = require('webpack'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  OpenBrowserPlugin = require('open-browser-webpack-plugin'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path'),
  srcPath = path.join(__dirname, 'src'),
  jsDestPath = 'scripts/';

module.exports = {
  target: 'web',
  cache: true,
  entry: {
    common: ['react', 'react-router', 'alt', 'es6-promise'],
    offline: path.join(srcPath, 'libs/offline.min.js'),
    materialize: path.join(srcPath, 'libs/materialize.js'),
    css3_animate_it: path.join(srcPath, 'libs/css3-animate-it.js'),
    app: path.join(srcPath, 'App.js')
  },
  resolve: {
    root: srcPath,
    extensions: ['', '.js'],
    modulesDirectories: ['node_modules']
  },
  output: {
    path: path.join(__dirname, 'build'),
    publicPath: '',
    filename: jsDestPath + '[name].js',
    library: ['Example', '[name]'],
    pathInfo: true
  },

  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel?cacheDirectory'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      /*{
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
        loader: 'url-loader?limit=5' // inline base64 URLs for <=8k images, direct URLs for the rest
      },*/
      { test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loader: 'url-loader?limit=1&name=images/[name].[ext]' },
      {
        test: /\.rt/,
        loader: "react-templates-loader"
      }
    ],

  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin('common', jsDestPath + 'common.js'),
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    new HtmlWebpackPlugin({
      inject: true,
      template: 'src/index.html'
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080',
      browser: 'Chrome'
    }),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin("styles/style.css", {
      allChunks: true
    })
  ],

  debug: true,
  //devtool: 'eval-source-map',//'eval-cheap-module-source-map',
  devServer: {
    contentBase: './build',
    historyApiFallback: true
  }
};

Answer 1

Remove publicPath: '', or set it to publicPath: '/', and require images like this let imgSrc = require('../../img/image.png'); via relative paths(from where you are trying to require images).

It should get resolved as {publicPath}/images/[name].[ext] I hope it should work.

Answer 2

You need to prefix your image URL with ~, otherwise it will be treated as relative to the CSS path. The ~ triggers webpack's normal module resolution. More info in the CSS loader docs here.