Question

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

所以这就是问题所在当我运行npm run 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

我实际上尝试过广泛地解决这个错误，搜索stackoverflow和github相关问题，但是所提供的解决方案都没有能够解决我的错误。

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

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中查找这些字段，并使用指定的文件作为模块的入口点。节点使用main字段来确定入口点，因此npm包都有main字段。你只是在寻找一个webpack字段，几乎没有任何包。更广泛使用的较新字段是module（有关详细信息，请参阅Rollup - pkg.module）。您应该使用webpack 2+中的默认值resolve.mainFields（该选项已重命名）。

您的resolve配置变为：

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

该教程已有近两年的历史，因此使用了一些旧版本。强烈建议升级webpack，因为它已经有了很大的改进。当您使用简单配置处理新项目时，使用official migration guide进行升级不会花费太多精力。

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

1 个答案: