title: How to handle frontawesome url-load issue in webpack4?
body: <p>I am working on a react project with <code>webpack4</code>. I added a import code in my js file:</p>
  
  <pre><code>@import 'font-awesome/css/font-awesome.css';
  </code></pre>
  
  <p>After than I got below error on compiling. </p>
  
  <pre><code>        ERROR in ./css/waffle/waffle.scss (./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js!./css/waffle/waffle.scss)
          Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff2?v=4.7.0' in 'TheFrontEnd/css/waffle'
  </code></pre>
  
  <p>I did some search and it seems a configuration for resolving the path has an issue but I have configured <code>webpack</code> to use load the <code>woff2</code> file. Below is the loader configuration in <code>webpack</code>:</p>
  
  <pre><code>module: {
              rules: [
                  {
                      test: /\.js?$/,
                      exclude: /(node_modules)/,
                      loader: 'babel-loader'
                  },
                  {
                      test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                      loader: 'file-loader'
                  },
                  {
                      test: /\.scss$/,
                      use: [
                          MiniCssExtractPlugin.loader,
                          'css-loader',
                          'resolve-url-loader',
                          'postcss-loader',
                          'sass-loader'
                      ]
                  },
                  {
                      test: /\.css$/,
                      use: [MiniCssExtractPlugin.loader, 'css-loader!resolve-url-loader']
                  },
                  {
                      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                      loader: 'file-loader?limit=10000'
                  },
                  {
                      test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                      loader: 'file-loader?name=[name].[ext]'
                  },
                  {
                      test: /\.html?$/,
                      use: [
                          {
                              loader: 'html-loader',
                              options: {
                                  attrs: false
                              }
                          }
                      ]
                  },
                  {
                      test: /\.(png|jpg|gif)$/,
                      loader: 'url-loader?limit=10000'
                  } // load small &lt;10kb images into base 64 into css
              ]
          },
  </code></pre>
  
  <p>This path <code>../fonts/fontawesome-webfont.woff2?v=4.7.0</code> is reference from <code>node_modules/font-awesome/css/font-awesome.css</code>. How can I make it work? Can anyone see anything wrong with my configuration?</p>