npm开始不与webpack一起使用反应

Question

目前我自我教导自己反应并试图设置一个开始框架。我在下面的错误在我的命令行中运行npm start后：7777：

~/projects/reactApp » webpack --display-error-details   [email protected] 
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

试试这个。 解决方案在您使用非默认设置时是必需的。

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;