title: Resolving background-image URLs in CSS files for Webpack
body: <p>I know this probably gets asked often, but I've looked at several similar questions, but can't quite figure out how to resolve URLs in this scenario.</p>
  
  <p>Note: I am <strong>NOT</strong> using a dev server or any special framework; just Webpack and opening files through the browser (<code>file://</code>). The Webpack-built files must work without a server, so please do not suggest using one. Also, I'm using Webpack 3.</p>
  
  <p>File structure:</p>
  
  <pre><code>src/
  - assets/
    - img/
      - backgrounds/
        - some-bg.jpg
    - css/
      - layouts.css
  - index.html
  - main.js
  node_modules/
  webpack.conf.js
  </code></pre>
  
  <p>layouts.css references some-bg.jpg as a background image:</p>
  
  <pre><code>body {
      background-image: url('../img/backgrounds/some-bg.jpg');
  }
  </code></pre>
  
  <p>In my Webpack config, I have:</p>
  
  <pre><code>module.exports = {
      entry: './src/main.js',
      output: {
          path: path.resolve(__dirname, "dist"),
          filename: 'bundle.js'
      },
       module: {
           loaders: [
             {
                  test: /\.css$/,
                  use: ExtractTextPlugin.extract({
                      use: "css-loader",
                      fallback: "style-loader"
                  })
             },
             {
                  test: /\.(jpe?g|png|gif)$/,
                  use: {
                      loader: 'url-loader',
                      options: {
                          limit: 8192,
                          name: "./assets/img/[name].[ext]"
                      }
                  }
             }
          ]
      }
      plugins: [
          new ExtractTextPlugin({
              filename: "./assets/css/style.css"
          }),
      ]
  // ...
  }
  </code></pre>
  
  <p>All of the images referenced in index.html are correctly changed to <code>./assets/img/whatever.png</code>.</p>
  
  <p>However, the background-image url is changed to <code>url(./assets/img/some-bg.jpg)</code>, which points to the path <code>dist/assets/css/assets/img/some-bg.jpg</code>.</p>
  
  <p>What do I have to change to get the url to simply be <code>dist/assets/img/some-bg.jpg</code>?</p>