npmはwebpackで動作しませんReact

Question

現在、私は自己を教えています。最初のフレームワークをセットアップしてセットアップしようとしています。私は、コマンドラインでnpm startを実行した後に、次のエラーを持っている：7777：ローカルホストをロードしようとしたときに

~/projects/reactApp » webpack --display-error-details   Dustin@Dustins-MacBook-Pro 
Hash: 94c3df302d8dd2990ab8 
Version: webpack 2.4.1 
Time: 37ms 

ERROR in Entry module not found: Error: Can't resolve './main.js' in '/Users/Dustin/projects/reactApp' 
resolve './main.js' in '/Users/Dustin/projects/reactApp' 
    using description file: /Users/Dustin/projects/reactApp/package.json (relative path: .) 
    Field 'browser' doesn't contain a valid alias configuration 
    after using description file: /Users/Dustin/projects/reactApp/package.json (relative path: .) 
    using description file: /Users/Dustin/projects/reactApp/package.json (relative path: ./main.js) 
     as directory 
     /Users/Dustin/projects/reactApp/main.js doesn't exist 
     no extension 
     Field 'browser' doesn't contain a valid alias configuration 
     /Users/Dustin/projects/reactApp/main.js doesn't exist 
     .js 
     Field 'browser' doesn't contain a valid alias configuration 
     /Users/Dustin/projects/reactApp/main.js.js doesn't exist 
     .json 
     Field 'browser' doesn't contain a valid alias configuration 
     /Users/Dustin/projects/reactApp/main.js.json doesn't exist 
------------------------------------------------------------ 
~/projects/reactApp » 

は偶然私は同じエラーを取得します。私はwebpackに精通していないと私は間違っている好奇心。 Webpackはエラーを表示するのには優れていませんが、私はこの時点まで他のエラーを修正することができました。

webpack.config.js

var config = { 
    entry: './main.js', 

    output: { 
    path: '/', 
    filename: 'index.js' 
    }, 

    devServer: { 
    inline: true, 
    port: 7777 
    }, 

    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 

     query: { 
     presets: ['es2015', 'react'] 
     } 
    }] 
    } 

} 

module.exports = config; 

package.json

{ 
    "name": "reactapp", 
    "version": "1.0.0", 
    "description": "first React app following tutorial", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "reactApp" 
    }, 
    "keywords": [ 
    "react" 
    ], 
    "author": "Dustin Waggoner", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4" 
    }, 
    "devDependencies": { 
    "babel-plugin-transform-react-jsx": "^6.24.1" 
    } 
} 

私はそれがパスの問題だと思うが、これを修正するために、いくつかの異なるオプションを試みました。助けてくれてありがとう。

Answer 1

これを試してください。 resolveは、デフォルト以外の設定を使用している場合は必須です。

Here is the documents for webpack。

var config = { 
    entry: './main.js', 

    output: { 
    path: '/', 
    filename: 'index.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    inline: true, 
    port: 7777 
    }, 

    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 

     query: { 
     presets: ['es2015', 'react'] 
     } 
    }] 
    } 

} 

module.exports = config;