React+Webpack不解析文件加载器

Question

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

项目的目录结构如下所示：

• webpack.config.js
• SRC
  • index.js
  • CSS
    • style.css
    • pGrooveRunners.ttf

    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"
        })
      ]
    };
    

    C:\Web\pwa-static2>yarn serve
    yarn run v1.17.3
    $ webpack-dev-server --mode development
    i ｢wds｣: Project is running at http://localhost:9000/
    i ｢wds｣: webpack output is served from /
    i ｢wds｣: Content not from webpack is served from C:\Web\app1\dist
    × ｢wdm｣: Hash: 77bf7ce09014ddcd0764
    Version: webpack 4.41.5
    Time: 3901ms
    Built at: 2020-01-27 13:35:42
         Asset      Size  Chunks             Chunk Names
     bundle.js  1.43 MiB    main  [emitted]  main       
    index.html  2.75 KiB          [emitted]  
    Entrypoint main = bundle.js
    [0] multi (webpack)-dev-server/client?http://localhost:9000 ./src/index 40 bytes {main} [built]
    [./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
    [./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
    [./node_modules/react/index.js] 190 bytes {main} [built]
    [./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
    [./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 4.29 KiB {main} [built]  
    [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]     
    [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
    [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
    [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
    [./src/css/style.css] 335 bytes {main} [built] [failed] [1 error]
    [./src/index.js] 207 bytes {main} [built]
        + 30 hidden modules
    
    ERROR in ./src/css/style.css 1:0
    Module parse failed: Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    > @font-face {
    |     font-family: pgRoofRunners;
    |     src: url("../fonts/pgroofrunners.ttf");
     @ ./src/index.js 3:0-25
    Child html-webpack-plugin for "index.html":
         1 asset
        Entrypoint undefined = index.html
        [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 2.99 KiB {0} [built]
        [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
        [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
        [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
    i ｢wdm｣: Failed to compile.
    

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

    我该怎么解决这个？

Answer 1

看起来您正在用WebPack导入CSS。为了理解CSS，webpack也需要一个加载器。通常你的模块里有这样的东西。规则：

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

或者，如果不使用minicsSextractorPlugin:

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