title: Webpack wrong relative path in css and html
body: <p>I have googled a lot, but I didn't find a clear solution to my question.</p>
  
  <p>Both my xxx.sass and index.html will reference the same xxx.png from images folder. But the webpack resolved to the wrong relative path. I use </p>
  
  <ul>
  <li>webpack ^4.41.2, </li>
  <li>file-loader ^4.2.0 for xxx.png </li>
  <li>mini-css-extract-plugin ^0.8.0 for xxx.css</li>
  <li>html-loader ^0.5.5 for index.html</li>
  </ul>
  
  <p>The source code:</p>
  
  <p>xxx.sass</p>
  
  <pre><code>.banner
      background-image: url(../images/xxx.png)
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;body&gt;
      &lt;h1&gt;Hello World&lt;/h1&gt;
      &lt;img src="./images/xxx.png" /&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My folder structure like this:</p>
  
  <pre><code>/dist
    /images
       xxx.png
    /css
       xxx.css
    index.js
    index.html
  
  /src
     /css
        xxx.sass
     /images
        xxx.png
     index.js
     index.html
  </code></pre>
  
  <p>As you can see the relative path to xxx.png in index.html and xxx.sass should be different. But after I run webpack, the index.html and xxx.css have the same relative path to xxx.png, like:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;body&gt;
     &lt;h1&gt;Hello World&lt;/h1&gt;
     &lt;img src="images/google_0877987d.png" /&gt;
     &lt;script type="text/javascript" src="index_b88aa84a.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>xxx.css</p>
  
  <pre><code>.banner
  {
      width:184px;
      height:60px;
      background-image:url(images/google_0877987d.png)
  }
  </code></pre>
  
  <p>My webpack.config.js:</p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  
  module.exports = {
      mode: 'production',
      entry: {
          index: './src/index.js',
      },
      output: {
          path: path.join(__dirname, 'dist'),
          filename: '[name]_[chunkhash:8].js',
      },
      module: {
          rules: [
              {
                  test: /\.sass$/,
                  use: [
                      MiniCssExtractPlugin.loader,
                      'css-loader',
                      'sass-loader',
                  ],
              },
              {
                  test: /\.(png|jpg|gif)$/,
                  exclude: /node_modules/,
                  use: [{
                      loader: 'file-loader',
                      options: {
                          name: '[path][name]_[contenthash:8].[ext]',
                          context: path.resolve(__dirname, 'src/'),
                          useRelativePaths: true,
                      },
                  }],
              },
              {
                  test: /\.html$/,
                  use: [{
                      loader: 'html-loader',
                      options: {
                          root: path.resolve(__dirname, 'src/'),
                          attrs: ['img:src', 'link:href'],
                      },
                  }],
              },
          ],
      },
      plugins: [
          new HtmlWebpackPlugin({
              template: './src/index.html',
          }),
          new MiniCssExtractPlugin({
              filename: 'css/[name]_[contenthash:8].css',
          }),
      ],
  }
  </code></pre>