Question

目前我自学React并试图建立一个开始框架。我在命令行中运行npm start后出现以下错误：

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

巧合的是，我在尝试加载localhost时遇到了同样的错误：7777。我不熟悉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;

npm开始不使用webpack React

1 个答案: