npm开始不适用于webpack React

Question

Currently I am self teaching myself React and trying to set-up a beginning framework. I'm having the following error after running npm start in my command line:

~/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 » 

Coincidentally I get the same error when trying to load localhost:7777. I'm not to familiar with webpack and curious what I am doing wrong. Webpack isn't great at displaying errors, but I've managed to fix other errors up to this point.

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

I think it is a path problem, but attempted several different options to correct this. Thanks for any help.

Answer 1

Try this. resolve is mandatory while you are using none-default settings.

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;