Webpack/React：egghead.ioチュートリアルに続いてエラーが表示される：このファイルタイプを扱うには適切なローダーが必要な場合があります

Question

私はちょうどthisチュートリアルに従っています。

私は最初のビデオを3〜4回見ました。私はSO上で同様の質問を見てきました

ERROR in ./main.js 
Module parse failed: /Users/newuser/projects/js101/react-egghead/main.js Unexpected token (5:16) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (5:16) 
    at Parser.pp.raise (/Users/newuser/projects/js101/react-egghead/node_modules/acorn/dist/acorn.js:920:13) 
... 

が、どれも私のための答えを持っているように見えるん：私は、アプリケーションを実行しようとすると、私は、コンソールで次のエラーを取得します。

module.exports = { 
    entry: './main.js', 
    output: { 
     path: './', 
     filename: 'index.js' 
    }, 
    devServer: { 
     inline: true, 
     port: 3333 
    }, 
    moudle: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    } 
} 

これはpackage.jsonがどのように見えるかです：：ここで

は私webpack.config.jsファイルです、それが映像に記載されていないですが、

{ 
    "name": "react-egghead", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.0.2", 
    "react-dom": "^15.0.2" 
    }, 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.9.0", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.5.0", 
    "webpack": "^1.13.0", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

そして、私が追加しました.babelrcファイル：パースは（5行目）に失敗したところ（私は今削除した）

{ 
    "presets": ["es2015", "stage-0", "react"] 
} 

これは、次のとおりです。

import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './App.js' 

ReactDOM.render(<App />, document.getElementById('app')) 

私は本当に次に何を試すべきか分かりません。私の環境に問題がありますか、それともmain.jsのコードに問題がありますか？

ご協力いただければ幸いです。

Answer 1

ウェブパックの設定に入力ミスがあります。 moduleの代わりにmoudleと入力したため、ローダーの設定は実際にwebpackによって無視されます。