title: webpack and less how to include images url in css
body: <p>Just confused with my webpack and less set up best way to include urls for images in my css and have them working in dev and build mode.</p>
  
  <p>Following worked in dev using webpack-devserver but not after build.</p>
  
  <pre><code>.login-container{
    height:100%;
    width:100%;
    background: url('../../images/home3.jpg') no-repeat center center fixed;
  </code></pre>
  
  <p>And in my config.</p>
  
  <pre><code>plugins.push(
              new HtmlWebpackPlugin({
                  template: './src/index.html',
                  inject: 'body'
              }),
              // Write out CSS bundle to its own file:
              new ExtractTextPlugin({
                  filename: 'css/styles.css',
                  allChunks: true})
          );
  </code></pre>
  
  <p>Also</p>
  
  <pre><code>entry: {
          app: './src/app/app.js'
      },
      devServer: {
          outputPath: path.join(__dirname, 'src'),
          contentBase: "./src"
      },
      output: {
          path: path.resolve(__dirname, 'dist'),
          publicPath: isProd ? '' : 'http://localhost:8080/',
          filename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js',
          chunkFilename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js'
      },
  </code></pre>
  
  <p>In dev it worked fine but after build it was trying to load the images from my css folder</p>
  
  <p>i.e. mysites/css/12424324234234234.jpg</p>
  
  <p>instead of </p>
  
  <p>i.e. mysites/12424324234234234.jpg where the images really was.</p>