0

我刚刚开始学习React,并使用Webpack实现它。Webpack未能编译

下面是我package.jsondevDependencies

"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它提出这个电子rror

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" 
}, 

回答

1

你需要一个CSS加载器,以便添加到您的WebPack配置到能够导入CSS文件。

npm install --save-dev css-loader style-loader

,并添加以下到您的WebPack配置的loaders阵列:

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

检查本作的详细信息:https://github.com/webpack-contrib/css-loader

编辑:您正在使用装载机和规则。他们基本上是一样的。 检查本作的详细信息:https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

试试这个的WebPack配置:

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' ] 
     } 
    ] 
    }, 
} 
+0

给我错误 '''ERROR在./src/index.js 模块解析失败:/家庭/ TPS/ReactApps /login-app/src/index.js意外的令牌(7:16) 您可能需要一个合适的加载程序来处理此文件类型。 |导入'./index.css'; | | ReactDOM.render(,document.getElementById('root')); | registerServiceWorker(); | @ multi./node_modules/webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.js ''' – ashvin

+0

在index.js里面你正在导入一个css文件并且webpack无法处理它,这就是错误的含义。 –

+0

你安装了css loader吗?用新的webpack.config.js和新的package.json更新你的问题 –