无法识别入口点：无法解析 'file' 或 'directory' './src/index.js'

Question

首先，我知道我们应该 post 完成和可重现的问题。但是，我正在做一个完整的 Redux 教程（http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html），我接近尾声了，这意味着我已经实现了很多文件和逻辑。出于这个原因，我将我的项目加载到公开可用的 github (https://github.com/rafaelmarques7/voting_app_tutorial)。这样可以很简单的看到项目结构和文件，甚至克隆项目重现错误。

所以问题来了当我运行 npm 运行 dev 时，出现以下错误：

ERROR in multi main Module not found: Error: Cannot resolve 'file' or 'directory' ./src/index.js in C:\Users\Y\Desktop\sketches\voting_app\client_side
  @ multi main

与 webpack 相关

ERROR in (webpack)-dev-server Module not found: Error: Cannot resolve module 'sockjs-client' in
  C:\Users\Y\Desktop\sketches\voting_app\client_side\node_modules\webpack-dev-server\client
  @ (webpack)-dev-server

ERROR in (webpack)-dev-server/client?  Module not found: Error: Cannot resolve 'file' or 'directory'
  C:\Users\Y\Desktop\sketches\voting_app\client_side\node_modules\url\url.js in
  C:\Users\Y\Desktop\sketches\voting_app\client_side\node_modules\webpack-dev-server\client
  @ (webpack)-dev-server/client? 1:10-24

我实际上已广泛尝试解决此错误，同时搜索 Whosebug 和 github 相关问题，但所提供的 none 解决方案能够解决我的错误。

有什么建议吗？非常感谢您的帮助！

Answer 1

您的 resolve 配置有两个问题。

resolve: {
  modulesDirectories: ['node_modules', 'src'],
  extensions: ['.js', '.jsx'],
  packageMains: ['webpack']
},

第一个是 resolve.extensions 需要空字符串才能导入具有完整扩展名的文件。例如，如果您导入 ./index.js ，它将尝试使用配置的扩展名（在您的情况下为 ./index.js.js 和 ./index.js.jsx ）来解析它。 这是一个 webpack 1 问题，当前的 resolve.extensions 在 webpack 2 或更高版本中可以正常工作（事实上，不再允许空字符串）。

第二期是resolve.packageMains。导入节点模块（带有 package.json 的目录）时使用此选项。 Webpack 将在 package.json 中查找这些字段，并使用指定的文件作为模块的入口点。 Node 使用 main 字段来确定入口点，因此 npm 包都有一个 main 字段。您只是在寻找一个 webpack 字段，几乎没有任何包具有该字段。一个使用更广泛的新字段是 module（请参阅 webpack 2+ 中的 Rollup - pkg.module for details). You should use the default of resolve.mainFields（该选项已重命名）。

您的 resolve 配置变为：

resolve: {
  modulesDirectories: ['node_modules', 'src'],
  extensions: ['', '.js', '.jsx'],
  packageMains: ['browser', 'module', 'main']
},

本教程已有将近 2 年的历史，因此使用了一些旧版本。强烈建议升级 webpack，因为它已经有了很大的改进。当您处理一个配置简单的新项目时，使用 official migration guide.

升级不会花费太多精力

无法识别入口点：无法解析 'file' 或 'directory' './src/index.js'

Fail on recognising entry point: Can not resolve 'file' or 'directory' './src/index.js'

javascript

reactjs

webpack

webpack-dev-server