Webpack 4 css-loader无法解析字体

Question

Webpack/css-loader抛出错误：

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'

这是webpack的配置：

{
  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&name=/fonts/[name].[ext]'
      },
      {
        test: /\.woff$/,
        use:
          'url-loader?mimetype=application/font-woff&name=/fonts/[name].[ext]'
      },
      {
        test: /\.svg$/,
        use: 'url-loader?mimetype=image/svg+xml&name=/fonts/[name].[ext]'
      },
      {
        test: /\.ttf/,
        use: 'url-loader?mimetype=application/font-ttf&name=/fonts/[name].[ext]'
      },
      {
        test: /\.woff2$/,
        use:
          'url-loader?mimetype=application/font-woff2&name=/fonts/[name].[ext]'
      },
      {
        test: /\.[ot]tf$/,
        use:
          'url-loader?mimetype=application/octet-stream&name=/fonts/[name].[ext]'
      },
      {
        test: /\.eot$/,
        use:
          'url-loader?mimetype=application/vnd.ms-fontobject&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
        }
      }
    }
  }
};

我在这一点上看到的所有线程都在使用url-loader来解决这个问题，但这已经在webpack的配置中了。我不确定为什么css-loader找不到css文件旁边的字体文件。

Answer 1

要加载字体，您必须使用文件加载器

下面是我如何使用webpack 4加载字体

        {
            test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
            loader: "file-loader"
        }

你可以阅读我的完整配置here