Reactjs 无法编译Web包

我刚刚开始学习React，我正在用Webpack实现它

以下是我的

package.json

中的

devdependency

：

"devDependencies": {
  "babel-core": "^6.25.0",
  "babel-loader": "^7.1.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "react-hot-loader": "^1.3.1",
  "react-scripts": "1.0.7",
  "serve": "^5.2.4",
  "webpack": "^3.0.0",
  "webpack-dev-server": "^2.5.0"
},

这是我的

webpack.config.js

：

module.exports = {
    context: __dirname + "/src",
    entry: './index.js',

    output: {
        filename: "index.js",
        path: __dirname + '/dist'
    },

    module: {
        loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ["react-hot-loader", "babel-loader"],
        }
        ],
    },
}

这里是

.babelrc

{
  "presets": [
    "es2015",
    "react"
  ]
}

现在，当我运行

npm start

时，它会引发此错误

ERROR in ./src/index.css
Module parse failed: /home/tps/ReactApps/login-app/src/index.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
|   margin: 0;
|   padding: 0;
@ ./src/index.js 21:0-22
@ multi ./node_modules/webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.js

ERROR in ./src/App.js
Module not found: Error: Can't resolve './notFound' in '/home/tps/ReactApps/login-app/src'
@ ./src/App.js 33:16-37
@ ./src/index.js
@ multi ./node_modules/webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.js

ERROR in ./src/App.css
Module parse failed: /home/tps/ReactApps/login-app/src/App.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .App {
|   text-align: center;
| }
@ ./src/App.js 19:0-20
@ ./src/index.js
@ multi ./node_modules/webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.js

请帮我解决这个问题

编辑1:

webpack.config.js

module.exports = {
  context: __dirname + "/src",
  entry: './index.js',

  output: {
    filename: "index.js",
    path: __dirname + '/dist'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["react-hot-loader", "babel-loader"],
      }
    ],
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
}

package.json

 "devDependencies": {
  "babel-core": "^6.25.0",
  "babel-loader": "^7.1.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "css-loader": "^0.28.4",
  "react-hot-loader": "^1.3.1",
  "react-scripts": "1.0.7",
  "serve": "^5.2.4",
  "style-loader": "^0.18.2",
  "webpack": "^3.0.0",
  "webpack-dev-server": "^2.5.0"
},

---

为了能够导入css文件，您需要将css加载器添加到Web包配置中

npm安装--保存dev css加载程序样式加载程序

并将以下内容添加到网页配置中的

加载程序
数组中：

{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
}

module.exports = {
  context: __dirname + "/src",
  entry: './index.js',

  output: {
    filename: "index.js",
    path: __dirname + '/dist'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["react-hot-loader", "babel-loader"],
      },       
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
}

请检查此项以了解更多信息：

编辑：您同时使用加载程序和规则。它们基本上是一样的。
查看此项了解更多信息：

请尝试此网页包配置：

{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
}

module.exports = {
  context: __dirname + "/src",
  entry: './index.js',

  output: {
    filename: "index.js",
    path: __dirname + '/dist'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["react-hot-loader", "babel-loader"],
      },       
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
}

在./src/index.js模块解析失败：/home/tps/ReactApps/login app/src/index.js中出现错误
error（7:16）。您可能需要适当的加载程序来处理此文件类型。|导入“./index.css”；||ReactDOM.render（，document.getElementById（'root'））；|registerServiceWorker（）；|@多节点模块/网页包开发服务器/客户端？http://localhost:8081 webpack/hot/dev server./index.js
inside index.js您正在导入一个css文件，而webpack无法处理它，这就是错误的意思。是否安装了css加载程序？使用新的webpack.config.js和新的package.jsondid更新您的问题您是否检查我对答案的编辑？将css加载器规则添加到相同的
加载器
数组中，而不是添加到新的
规则
数组中。谢谢，它可以工作。事实上，我以前尝试过上面的解决方案，错误是不同的，我认为错误是关于网页的，所以我忽略了错误。再次感谢：）