javascript - 使用 webpack 时出现错误 : Cannot 'file' or 'directory' ./lib/React

Question

我使用 React 已经有一段时间了，想用 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'; 将 react 导入我的文件时，会发生此错误/p>

我已经安装了 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