title: Images not displaying on production build, only in dev (webpack/sass-loader)
body: <p>When running my app on webpack dev server, all my image files are working whether as img tags in my index.html or background-image: url()..</p>
  
  <p>Running my project though in production build, I am getting file reference errors that they cannot be found.</p>
  
  <pre><code>GET file:///img/featured.png net::ERR_FILE_NOT_FOUND
  GET file:///img/header-img1-1.jpg net::ERR_FILE_NOT_FOUND
  </code></pre>
  
  <p>I added the copy webpack plugin as I thought this would move all images from my src/img folder to my img folder inside dist.</p>
  
  <p>Should I be using the contentBase option for webpack-dev-server? Or is the copy-webpack-plugin not getting the correct reference? Super confused</p>
  
  <p>Project tree:</p>
  
  <pre><code>- webpack.config.js
  - package.json
  - .babelrc
  - src
    - js
      - index.js
      - ...
    - img
      - ALL IMAGES LOCATED HERE
    - scss
      - layout
        - landing.scss
        - brands.scss 
      - base
    - index.html
  </code></pre>
  
  <p>inside landing.scss
  i have used</p>
  
  <pre><code>background: url('~/img/img-title.png')
  </code></pre>
  
  <p>same in other files like brands.scss</p>
  
  <pre><code>background: url('~/img/img-title.png')
  </code></pre>
  
  <p>Which has all worked fine, and I think I've confused myself with how images are referenced with webpack/sass loader, and can't seem to work out how to get the image paths to work for both dev/production, i can only seem to get one working at a time.</p>
  
  <p>production tree:</p>
  
  <pre><code>- dist
    - css
    - img
    - js
    - index.html
  </code></pre>
  
  <p><strong>webpack.config.js:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require('path');
  const autoprefixer = require('autoprefixer');
  
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const extractPlugin = new ExtractTextPlugin({
    filename: 'css/main.css'
  });
  
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  
  module.exports = (env) =&gt; {
    const isProduction = env.production === true
  
    return {
   entry: './src/js/index.js',
   output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js', 
   },
   module: {
     rules: [
    {
         test: /\.js$/,
         include: path.resolve(__dirname, 'src'),
      use: 'babel-loader' 
    },
    {
      test: /\.css$|\.scss$/,
      include: path.resolve(__dirname, 'src'),
      use: extractPlugin.extract({  
     fallback: "style-loader",
     use: [
       { loader: 'css-loader', options: { importLoaders: 2, sourceMap: true }},
       { loader: 'postcss-loader', options: { sourceMap: true, plugins: () =&gt; [autoprefixer] }},
       { loader: 'sass-loader', options: { sourceMap: true }},
     ],
      }) 
    },
    {
      test: /\.html$/,
      use: ['html-loader']
    },
    {
      test: /\.(jpe?g|png|gif)$/,
      use: [
     {
          loader: 'url-loader',
       options: {
      limit: 1000,
      name: 'img/[name].[ext]',
       }
     }
      ]
    }
     ]
   },
   plugins: [
     extractPlugin,
     new HtmlWebpackPlugin({ 
    filename: 'index.html',
    inject: true,
    template: './src/index.html'
     }),
     new ScriptExtPlugin({
       defaultAttribute: 'async'
     }),
     new CleanWebpackPlugin(['dist']),
     new CopyWebpackPlugin([
       {from:'src/img',to:'img'} 
     ]), 
   ]
    }
  }</code></pre>
  </div>
  </div>
  </p>