Webpack未能編譯

Question

我剛剛開始學習React，並使用Webpack實現它。

下面是我package.json的devDependencies：

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

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