Webpack 4: ERROR in入口模块未找到：错误：无法解析'./src'

Question

我第一次尝试运行webpack-4

webpack ./src/js/app.js ./dist/app.bundle.js

它显示警告/错误：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in multi ./src/js/app.js ./dist/app.bundle.js
Module not found: Error: Can't resolve './dist/app.bundle.js' in 'D:\wamp64\www\webpack-4'
 @ multi ./src/js/app.js ./dist/app.bundle.js

然后我尝试改变模式

webpack --mode development

它显示：

ERROR in Entry module not found: Error: Can't resolve './src'

- Sabir Hussain

---

请查看此Webpack-4演示项目。希望它能对您有所帮助！ - Carloluis

Answer 1

解决方案

花费了很长时间才找到了解决方案。

解决方案：将index.js文件添加到src文件夹中。

就是这样！问题解决了 :)

在研究的过程中，我发现了一些关于webpack 4的事实：

webpack 4默认情况下不需要配置文件！

webpack 4无需定义入口点：它会将./src/index.js作为默认值！

- Sabir Hussain

---

如果你的JS文件在某个位置，那么你该如何定义路径或入口点？ - Lokesh Pandey

如果您不想更改JS文件位置，您可以随时使用此答案。 https://dev59.com/xFcO5IYBdhLWcg3wxEYP#51668282 - Lokesh Pandey

这解决了我的问题，但我将我的索引文件设置为 TypeScript 文件。entry: path.resolve(process.cwd(), './src/index.ts') 不确定为什么会发生这种情况。 - deathknight256

Answer 2

在 now.sh 部署时遇到了这个问题。

解决方案：使用默认行为

将入口点移动到 src/index.js。

利用webpack@4的默认值entry：

默认情况下，它的值是./src/index.js，但您可以通过在webpack配置中配置entry属性来指定不同的（或多个）入口点。

解决方案：明确指定

如@Lokeh所指出的那样，如果您不想更改JS文件位置，则始终可以在webpack.config.js中使用path.resolve()：

entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',

- Édouard Lopez

---

你上次的解决方案帮了我大忙，即使是在webpack读取自定义的.ejs文件时也能运行。谢谢！ - klewis

我刚刚构建了一个新的Rails 6.1.3应用程序，但是没有找到任何index.js文件。 - Mices

Answer 3

在webpack.config.js中显式添加上下文解决了我的问题。在您的项目中使用以下代码片段进行调整：

context: __dirname + '/src',
entry: './index.js',

- THAMEEM ANSUR SHAIK

Answer 4

webpack版本为4.46.0。

对于从webpack 4迁移到5的过程中可能会出现困难的人，如果有多个webpack配置文件，并且任何人都在使用merge：

假设webpack.common.js依赖于通过cli传递的一些变量：

module.export = (env) => {
  const {myCustomVar} = env;

  return {
    // some common webpack config that uses myCustomVar
  }
}

当你需要在webpack.prod.js中使用通用配置时：

const { merge } = require('webpack-merge'); // <-- `merge` is now named import if you are using > v5
const common = require('./webpack.common.js');

const getProdConfig = () => {....}

module.exports = (env) => {
  return merge(common(env), getProdConfig()); // <-- here, `call` common as its exported as a fn()
};

- YEVY

---

看到如何将merge命令与env参数结合使用非常有帮助。谢谢。 - Onosa

非常感谢你，我亲爱的朋友！（适用于Webpack 5） - Eugene

太好了，谢谢提醒。我忘记了我正在导出一个函数，然后尝试合并这些函数而不是它们的返回值。 - bgausden

Answer 5

webpack ./src/js/app.js --output ./dist/app.bundle.js --mode development

这对我很有帮助。我遇到了同样的问题，原因是webpack的新版本。

- ladhari

Answer 6

其他解决方法无效。我通过将以下内容添加到package.json来解决问题。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" //this
  },

然后运行npm run build就可以了。一开始我试过用npx webpack，但并不起作用。希望知道为什么。

- Bar Akiva

Answer 7

在这里提醒一下，如果有人像我一样没有注意细节，可能会遇到同样的错误。我的webpack配置文件命名为webpack.config而不是webpack.config.js，因此我的自定义配置从未被选择，webpack会回退到默认的入口"src/index.js"。

- Nicholas

Answer 8

我曾遇到类似的错误，但通过以下命令解决了：webpack src/index.js -o dist/bundle.js。其中的-o起到了关键作用。问题不在于index.js的位置，而是缺少定义输出路径位置的运算符。

请参阅https://webpack.js.org/api/cli/。

Webpack版本为4.44.1。

- James

Answer 9

在我的情况下，我错误地使用了.tsx而不是.jsx。 该项目是使用JavaScript而不是TypeScript编写的。 使用Webpack作为打包工具。 尝试使用Vite来避免这种情况。

- devjs1000

Answer 10

对于Rails 6应用程序，以下步骤适用于我：

1）bundle exec rails webpacker:install 系统将重新安装webpacker，但会重写一些文件：

  modified:   config/webpack/environment.js
  modified:   config/webpacker.yml
  modified:   package.json
  modified:   yarn.lock

2) 将配置返回到初始状态：

git checkout config/webpack/environment.js

git checkout config/webpacker.yml

package.json 和 yarn.lock 可以保持不变。

- Ruslan Valeev