错误:当与webpack一起使用时不能‘文件’或‘目录’./lib/React

Question

我已经用了很长一段时间了，我想和webpack一起试试。

这是我的webpack.config.js：

var path = require('path');

module.exports = {
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, "build"),
        publicPath: "/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    },
    resolve: {
        extensions: ['', 'js', 'jsx']
    }
}

发生的错误如下：

ERROR in ./~/react/react.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/React in /Users/username/path/to/app/node_modules/react
 @ ./~/react/react.js 3:17-39

当我使用var React = require('react')或import React from 'react';导入到文件中时，会发生此错误。

我已经为babel安装了所需的预置包：

  "devDependencies": {
    "babel-core": "^6.4.0",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "webpack": "^1.12.10",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "highcharts-release": "^4.2.1",
    "immutable": "^3.7.6",
    "react": "^0.14.5",
    "react-highcharts": "^6.0.0",
    "react-redux": "^4.0.6",
    "redux": "^3.0.5"
  }

谢谢!

Answer 1

根据您的pastebin示例，您可以看到webpack正在寻找React、Reactjs或Reactjsx，而不是React.js。

/Users/bIgB/Private/Code/go-projects/src/github.com/bIgBV/cereberus/app/node_modules/react/lib/React doesn't exist
  /Users/bIgB/Private/Code/go-projects/src/github.com/bIgBV/cereberus/app/node_modules/react/lib/Reactjs doesn't exist
  /Users/bIgB/Private/Code/go-projects/src/github.com/bIgBV/cereberus/app/node_modules/react/lib/Reactjsx doesn't exist

要解决这个问题，只需在扩展的前面添加一个.，如下所示：

resolve: {
    extensions: ['', '.js', '.jsx']
}

https://webpack.github.io/docs/configuration.html#resolve-extensions