React + Webpack 不解析文件加载器答案

【问题标题】：React + Webpack don't resolve file loadersReact + Webpack 不解析文件加载器
【发布时间】：2020-05-13 02:06:51
【问题描述】：

我试图将一个典型的 HTML 站点迁移到一个“轻量级”的 React 应用程序。因此，我安装了没有create-react-app 的 React。

我配置了 Webpack，然后 file-loader 使用 CSS 文件中的字体。但是我在编译时仍然会出错，因为它无法识别文件加载器（我也尝试过ttf-loader 和url-loader）。

我一直在阅读类似的问题，但他们的解决方案都不适用于这种情况。

项目的目录结构如下：

webpack.config.js
源
- index.js
- CSS
  - style.css
- 字体
  - pgroofrunners.ttf

这是我当前的 Webpack 配置（webpack.config.js）：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src/index'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            use: ['babel-loader']
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'fonts/'
                }
              }
            ]
          }
    ]
  },
  devServer: {
    contentBase:  path.resolve(__dirname, 'dist'),
    port: 9000
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html"
    })
  ]
};

所以，当我运行 webpack-dev-server --mode development 时，它会编译但随后会崩溃并出现以下错误：

C:\Web\pwa-static2>yarn serve 纱线运行 v1.17.3 $ webpack-dev-server --mode 开发 i ｢wds｣: 项目在 http://localhost:9000/ 运行 i ｢wds｣：webpack 输出来自 / i ｢wds｣：不是来自 webpack 的内容由 C:\Web\app1\dist 提供 × ｢wdm｣：哈希：77bf7ce09014ddcd0764 版本：webpack 4.41.5 时间：3901ms 建于：2020-01-27 13:35:42 资产大小块块名称 bundle.js 1.43 MiB 主要 [发出] 主要 index.html 2.75 KiB [发出] 入口点 main = bundle.js [0] 多 (webpack)-dev-server/client?http://localhost:9000 ./src/index 40 字节 {main} [内置] [./node_modules/ansi-html/index.js] 4.16 KiB {main} [内置] [./node_modules/react-dom/index.js] 1.33 KiB {main} [内置] [./node_modules/react/index.js] 190 字节 {main} [内置] [./node_modules/strip-ansi/index.js] 161 字节 {main} [内置] [./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 4.29 KiB {main} [内置] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [内置] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [内置] [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [内置] [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 字节 {main} [内置] [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [内置] [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 字节 {main} [内置] [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built] [./src/css/style.css] 335 字节 {main} [built] [failed] [1 error] [./src/index.js] 207 字节 {main} [内置] + 30 个隐藏模块 ./src/css/style.css 1:0 中的错误模块解析失败：意外字符“@”（1:0）您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见 https://webpack.js.org/concepts#loaders > @字体脸{ |字体系列：pgRoofRunners； | src: url("../fonts/pgroofrunners.ttf"); @ ./src/index.js 3:0-25 “index.html”的子 html-webpack-plugin： 1 项资产入口点未定义 = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 2.99 KiB {0} [内置] [./node_modules/lodash/lodash.js] 528 KiB {0} [内置] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 字节 {0} [内置] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 字节 {0} [内置] i ｢wdm｣：编译失败。

我猜这是导致 **src/css/style.css* 中的应用程序崩溃的原因：

@font-face {
    font-family: pgRoofRunners;
    src: url("../fonts/pgroofrunners.ttf");
}

我该如何解决这个问题？

【问题讨论】：

你需要一个style loader

标签： javascript node.js reactjs webpack babeljs

【解决方案1】：

看起来您正在使用 webpack 在某处导入 CSS。为了理解 CSS，webpack 也需要一个加载器。通常你的 module.rules 中有这样的东西：

{
  test: /\.css$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader']
}

或者，如果你不使用MiniCssExtractorPlugin：

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

【讨论】：

【解决方案2】：

我用 url-loader 代替了 file-loader（需要安装）。

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

【讨论】：