title: Webpack 4 css-loader cannot resolve font
body: <p>Webpack/css-loader is throwing the error:</p>
  
  <pre><code>ERROR in ./src/styles/global.css (./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib!./src/styles/global.css)
  [React]     Module not found: Error: Can't resolve 'expert-sans-light.woff' in '/Users/MyUser/git/as3_UI/React/src/styles'
  </code></pre>
  
  <p>This is the webpack config:</p>
  
  <pre><code>{
    entry: { app: APP_DIR + '/index.js' },
    output: {
      path: BUILD_DIR,
      filename: 'assets/app/app.js',
      chunkFilename: 'assets/app/[name].bundle.js',
      publicPath: '/ecom/as2/UI/'
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        path: BUILD_DIR,
        filename: 'assets/css/[name].css',
        chunkFilename: 'assets/css/[name].bundle.css'
      }),
      new CopyWebpackPlugin([{ from: 'src/index.html' }])
    ],
    module: {
      rules: [
        {
          test: /\.(png|jpg)$/,
          use: 'url-loader?limit=100000&amp;name=/fonts/[name].[ext]'
        },
        {
          test: /\.woff$/,
          use:
            'url-loader?mimetype=application/font-woff&amp;name=/fonts/[name].[ext]'
        },
        {
          test: /\.svg$/,
          use: 'url-loader?mimetype=image/svg+xml&amp;name=/fonts/[name].[ext]'
        },
        {
          test: /\.ttf/,
          use: 'url-loader?mimetype=application/font-ttf&amp;name=/fonts/[name].[ext]'
        },
        {
          test: /\.woff2$/,
          use:
            'url-loader?mimetype=application/font-woff2&amp;name=/fonts/[name].[ext]'
        },
        {
          test: /\.[ot]tf$/,
          use:
            'url-loader?mimetype=application/octet-stream&amp;name=/fonts/[name].[ext]'
        },
        {
          test: /\.eot$/,
          use:
            'url-loader?mimetype=application/vnd.ms-fontobject&amp;name=/fonts/[name].[ext]'
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                modules: true,
                localIdentName: '[path]__[name]__[local]',
                sourceMap: true
              }
            },
            { loader: 'postcss-loader' }
          ]
        }
      ]
    },
  
    resolve: {
      extensions: ['.js', '.jsx', '.css', '.less']
    },
    // optimization
    optimization: {
      splitChunks: {
        cacheGroups: {
          default: false,
          vendors: false,
          vendor: {
            // name of the chunk
            name: 'vendor',
            // async + async chunks
            chunks: 'all',
            // import file path containing node_modules
            test: /node_modules/,
            // priority
            priority: 20
          },
          // common chunk
          common: {
            name: 'common',
            minChunks: 2,
            chunks: 'async',
            priority: 10,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      }
    }
  };
  </code></pre>
  
  <p>All the threads I've seen on this point to using <code>url-loader</code> to fix this issue, but that's already in the webpack config. I'm not sure why <code>css-loader</code> cannot find the font file that is right next to the css file</p>