ReactJS 应用程序的 Webpack 配置 - 您可能需要适当的加载程序来处理此文件类型

编程问答 2022-05-23

问题描述

我正在尝试为 ReactJS 应用配置 webpack，但遇到以下错误，currently no loaders are configured to process this file.

错误：

[./src/styles.css] 268 bytes {main} [built] [Failed] [1 error]
    + 325 hidden modules

ERROR in ./src/styles.css 1:0
Module parse Failed: Unexpected token (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
> .App {
|   background: #e2e4e9;
| }
 @ ./src/App.js 45:0-22
 @ ./src/index.js

webpack.config.js：

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

module.exports = {
    entry: './src/index.js',mode: 'development',output: {
      globalObject: 'self',path: path.resolve(__dirname,'build'),filename: 'webpack-bundle.js',publicPath: path.resolve(__dirname,'/build/'),},module: {
      rules: [
        {
          test: /\.js$/,loader: 'babel-loader',exclude: ['/node_modules/','/src/styles.css']
         
        },{
          test: /\.(sass|css)$/,include: /node_modules/,loaders: ['style-loader','css-loader','sass-loader'],}
    ],plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',favicon: 'public/dam.ico'
    })
  ],devServer: {
    publicPath: path.resolve(__dirname,port: 8085,hot: true,}
};

.babelrc

{
  "passperPreset": true,"presets": [
    "@babel/preset-react","@babel/preset-env"
  ],"plugins": [
      [
        "@babel/plugin-proposal-class-properties"
      ]
  ]
}

package.json


  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.40","@babel/core": "^7.13.1","@babel/plugin-proposal-class-properties": "^7.13.0","@babel/plugin-transform-runtime": "^7.4.4","@babel/preset-env": "^7.13.5","@babel/preset-react": "^7.12.13","babel-core": "^6.26.3","babel-loader": "^8.2.2","babel-preset-env": "^1.7.0","babel-preset-react": "^6.24.1","css-loader": "^2.1.1","eslint": "^7.17.0","eslint-config-google": "^0.14.0","eslint-config-standard": "^16.0.2","eslint-plugin-import": "^2.22.1","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^4.2.1","eslint-plugin-react": "^7.22.0","file-loader": "^4.0.0","html-webpack-plugin": "^3.2.0","less-loader": "^8.0.0","node-sass": "^4.12.0","prettier": "^2.2.1","sass": "^1.32.8","sass-loader": "^7.3.1","style-loader": "^0.23.1","url-loader": "^2.0.0","webpack": "^4.46.0","webpack-cli": "^3.3.12","webpack-dev-server": "^3.7.0"
  }
}

解决方法

我希望 webpack 配置中的这一行是问题 include: /node_modules/。我认为这不包括 src 文件所在的 styles.css 目录。老实说，我不确定 node_modules 是否需要这一行，但是如果您删除或包含 {{1 }} 目录，我认为app.css文件会被处理。

这里有一些 src 示例：https://webpack.js.org/configuration/module/#condition

babel-loaderjavascriptreactjsreactjsreactjsreactjswebpackwebpackwebpack