Webpack：Module not found: Error: Can't resolve './dist/bundle2.js' in 'F:\Workspaces\

最新推荐文章于 2022-04-26 19:04:24 发布
最新推荐文章于 2022-04-26 19:04:24 发布
阅读量5.3k 收藏 13
点赞数 11
分类专栏： Node.js 文章标签： Module not found: Error: Can't reso webpack打包错误
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/daponi/article/details/102949986
版权

最近学Vue有要学习webpack ,用的webpack 版本是：4.41.2版本的，在打包过程用执行了这个命令

webpack .\src\main.js  .\dist\bundle.js
1.然后就报了下边的错误：

在这里插入图片描述
     后来查看之后原来是版本的问题，我用的这个wepack 版本过高，即3.x的wepack在新版4.x的webpack已经不支持了(怪不得视频教学都是指定下载3.6或3.8版的webpack)，所以我查官方文档：
在这里插入图片描述
原来是中间加了个 -o 

webpack .\src\main.js  -o .\dist\bundle.js
2.这样执行就正确了，不报错误了，执行之后效果是这样的

在这里插入图片描述

另外还有个问题就是 执行成功了，但是下边有几行黄色的很恶心的提示，这个怎么解决呢？开发者还是要读一下这几行黄字的意思：

最低0.47元/天 解锁文章
npm 打包报错：ERR_WEBPACK_MODULE_NOT_FOUND
甘蓝的专栏
12-04 255
webpack打包提示模块找不到，其实错误提示说的很清楚，只有两个原因。
Error: [BABEL] E:\tsstudy\part3\src\index.ts: .targets is not allowed in preset options TypeScript
hdy_kpl的博客
04-23 791
我突然理解了，每一个preset是一个数组，我没有[]就相当于我没有使用数组包裹@babel/present-env，这是Babel配置的格式要求，如果不按照预期格式进行配置，Babel解析器法务正确解析，从而导致报错，修改之后，Babel就可以正确低读取并应用配置了。在为webpack进行配置完后并且下载了对应的依赖，允许npm run build，发现了报错。（1）检查Bable配置文件（这里都是最新版本）（3）检查webpack.config.js文件。（2）检查index.ts文件。
Webpack问题一：Moudle not found：Error: Can‘t resolve ‘./src‘ in。。。。
Hawking的博客
12-22 5703
因为以前是尝试使用过webpack老版本的，依稀印象中好像没这么严格的。 反正不理那些了，现在原本遇到的问题就是： 就是无论如何都是找不到./src 在我想要打包的文件里面，然后去找了一下原因，也是在优快云上面找到了一个老哥记录下了这个问题： 然后发现了最终的问题就是： 一、在根目录下面创建 src 文件夹 二、里面的文件入口都是改成index.html or index.js 即可。 突然发现找错误还真的很麻烦. ...
webpack打包命令-Module not found: Error: Can‘t resolve
qq_41887644的博客
07-14 1722
原因：版本问题 解决方法:加-o webpack ./src/main.js -o ./dist/bundle.js
webpack打包时提示Invalid configuration object. Webpack has been initialised using a configuration objet错误
编程教培一线讲师
04-24 1万+
一般在打包文件或者在生产环境基本配置的时候老是报错不知道什么原因，可能是以下问题（我报错经常的几个原因） 一、关键字没有写对，比如【module写成modules】后者【resolve写成resolver】或者【plugins写成Plugins】等等 二、某个图片或者文件路径写错了，文件名写错了 三、某个文件引入了未调用 四、你写的webpack语法过时了，无法显示 五、没有安装一些基础的插件，这个你可以查看这几个博文 一 二 三 学完gulp会发现webpack简单一点 总之：不要慌，先检查一下自己经常.
使用webpack时遇到Module not found
RealRecall的博客
12-22 924
完整的报错是： Module not found: Error: Can’t resolve ‘a.js’ in ‘D:\programming\trywebpack’ 我解决的方法是，添加配置文件：webpack.config.js 配置文件内容为： module.exports = { entry: "./a", output: { filename: "pack.js", path: __dirname, }, }; 三项的意思是：入口、出口、路径。__dirname表
前端开发趋势：对比现代JavaScript框架与工具，掌握前端开发未来
[前端开发趋势：对比现代JavaScript框架与工具，掌握前端开发未来](https://cdn.educba.com/academy/wp-content/uploads/2020/09/Vue.js-components.jpg) # 摘要 本文探讨了前端开发的演变历程、现代JavaScript框架...
模块化开发演进挑战：JavaScript_Garden中的实践与思考（前端架构师视角）
[模块化开发演进挑战：JavaScript_Garden中的实践与思考（前端架构师视角）](https://opengraph.githubassets.com/30addcb8e7352bcb7780e602c9d5565e01f907becae7ee515b28719f9431e1a6/browserify/http-browserify) ...
【模块化构建全攻略】：从零开始创建高效JavaScript模块系统
![【模块化构建全攻略】：从零开始创建高效JavaScript模块系统]...文章还探讨了构建高效模块系统所需的基础工具，如Webpack、Rollup和Parcel，以及它们的特点和用法。此外，本文着
使用webpack打包时，Module not found:
chenqk_123的专栏
05-14 1万+
在使用webpack打包React的时候，出现了一个Module not found的错误。 ERROR in ./src/common.js Module not found: Error: Can't resolve 'react-demo-1' in 'G:\chenqk\app\webpack-react-project\src' @ ./src/common.js 11:17-40...
《Webpack 报错》Module not found: Error: Can‘t resolve ‘./@/assets/image/folder.png‘
前端技术
02-16 5732
打包时编译 png 图片错误，检查 webpack.config.js 文件发现缺少 module.rules 配置： { test: /\.(png|jpg|gif|svg)$/, loader: "url-loader", options: { limit:1024000, name: "[name].[ext]?[hash]" } }
webpack打包时 Module not found: Error: Can't resolve ' 错误处理
热门推荐
jixinping的博客
11-14 3万+
Can’t resolve ‘某模块’， 相关依赖没有安装 执行 npm install ‘某模块’ 重新打包即可 Can’t resolve ‘自己写的页面’ （例如import ProjectBudget from “./projectBudget/projectBudget”） 执行这一句时报Can’t resolve ‘./projectBudget/projectBudget’ in ...
webpack报错 Module not found: Error: Can‘t resolve ‘XXX‘ in ‘XXX‘
yuguifang89的专栏
11-19 2万+
问题描述： 最近想要学习一下webpack的用法，按照官方示例https://www.webpackjs.com/api/cli/#%E4%B8%8D%E4%BD%BF%E7%94%A8%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%9A%84%E7%94%A8%E6%B3%95学习，我的工程目录为： . ├── dist ├── src | ├── main.js | └── other.js └── index.html 内容为： <!-- in
前端应用-webpack-解决webpack 报错Module not found: Error: Can't resolve '.\dist\bundle.js' in 'D:\tasks_
上海 彭彭
08-20 1万+
当我使用命令 webpack .\src\main.js .\dist\bundle.js main.js 是源文件， bundl.js 是生成的文件 ，但是报错如下： 这是为什么呢?原因是我的webpack版本过高,原来的命令已经不适用了 如下查询版本号: 那应该如何解决? 更换打包命令为: webpack .\src\main.js -o .\dist\bundle.js 其中 ...
2021-09-10【webpack】Module not found: Error: Can‘t resolve ‘./dist/bundle.js‘
weixin_45650440的博客
09-10 248
. webpack .\src\main.js .\dist\bundle.js 版本新增 -o webpack .\src\main.js -o .\dist\bundle.js 正确如下 webpack ./src/main.js -o ./dist/bundle.js
webpack Module not found: Error: Can't resolve './public/bundle.js'报错
taowuhua的博客
08-13 1321
https://blog.csdn.net/vivian_wang07/article/details/83617209
webpack Module not found: Error: Can‘t resolve 使用新命令
软不隆冬的er更
10-20 1985
使用命令webpack ./xxx/xx.js ./yyy/yy.js打包项目的时候提示无法处理这个命令，原来是webpack的在4.0之前是使用上面的命令，我现在使用的是webpack5.1.3，要使用新的命令 webpack ./xxx/xx.js -o ./yyy/yy.js 在中间加一个-o就可以了 我打包出来js文件是放在yyy文件夹下的yy.js文件中，默认生成了一个main.js文件，所以应该是正常的。 1–编译结束 2–最终打包的文件有283字节 3/4–需要打包的文件和依赖文件的大小.
【Bug 解决】webpack 报错：Module not found. Did you mean xxx
逸尘的专栏
04-26 3756
bug现场： 出现原因： 当在 .mjs 文件或其他 .js 文件中导入模块，并且它们最近的 package.json 中包含 “type” 字段，且值为 "module"时。引用文件的时候需要包含扩展名，否则 webpack 会提示 Module not found 的错误且编译失败。 解决办法： module.exports = { // ... module: { rules: [ { test: /\.m?js$/, resolve: {
webpack打包报错module not found
weixin_43410491的博客
06-07 810
刚接触webpack 使用命令webpack ./src/main.js ./dist/bundle.js打包时报错如下： 后查资料发现是因为版本过高， 成功的打包命令是： webpack ./src/main.js -o ./dist/bundle.js
module not found: error: can t resolve.src/main.js
最新发布
03-24
<think>好的，用户遇到了一个错误：“Module not found: Error: Can't resolve './src/main.js’”。我需要先理解这个错误的原因，然后给出解决方案。首先，这个错误通常出现在使用Webpack或其他打包工具时，它们无法找到入口文件。 首先，用户的项目结构中可能缺少了src目录下的main.js文件，或者路径不正确。需要检查项目根目录下是否有src文件夹，里面是否有main.js。如果用户使用的是类似Vue或React这样的框架，可能需要确认默认的入口文件是否存在，或者是否被错误地删除或重命名了。 其次，可能是配置文件的问题，比如webpack.config.js中的entry属性指向了错误的路径。用户可能修改了配置，但路径没有更新，或者存在拼写错误。这时候需要检查配置文件中的入口路径是否正确，是否使用了相对路径，比如应该是entry: './src/main.js'而不是其他路径。 另外，也有可能是因为文件扩展名的问题。比如，用户可能将文件保存为.main.jsx或者其他扩展名，但配置中没有指定，导致无法解析。这时候需要确认文件扩展名是否匹配，或者在配置中添加相应的扩展名解析。 还有可能是node_modules的问题，虽然不太常见，但有时候依赖安装不正确会导致打包工具无法正常工作。这时候可以尝试删除node_modules和package-lock.json，然后重新运行npm install。 用户的开发环境也是一个考虑因素。比如，使用Vue CLI或Create React App创建的项目，通常会有默认的入口文件配置。如果用户手动修改了配置，可能会引发问题。这时候建议用户检查是否无意中更改了配置文件，或者是否按照官方文档正确配置。 另外，操作系统的大小写敏感问题也可能导致路径错误。例如，在Windows上路径不区分大小写，但在Linux或macOS上可能会，如果路径中的大小写与实际不一致，就会报错。需要检查路径中的src和main.js的大小写是否正确。 最后，可能需要检查导入语句是否有误。例如，在项目的其他文件中是否有错误的import语句指向了不存在的main.js，或者在HTML文件中是否正确引用了打包后的文件。 总结下来，解决步骤应该是：1. 确认文件路径和名称是否正确；2. 检查打包工具的配置文件；3. 检查文件扩展名和导入语句；4. 重新安装依赖；5. 考虑操作系统的大小写问题。需要逐步排查这些可能性，帮助用户找到问题所在。</think>遇到 `Module not found: Error: Can't resolve './src/main.js'` 错误时，通常表示项目构建工具（如 Webpack、Vite 等）无法找到入口文件。以下是逐步排查和解决问题的指南： --- ### 第一步：检查文件路径 1. **确认文件是否存在** - 检查项目根目录下是否有 `src` 文件夹。 - 检查 `src` 目录中是否包含 `main.js` 文件（或 `main.ts`、`main.jsx` 等变体）。 2. **验证路径大小写** - 在 Linux/macOS 系统中，路径区分大小写。确保路径 `./src/main.js` 与实际文件名完全一致。 --- ### 第二步：检查构建工具配置 1. **Webpack 配置** - 打开 `webpack.config.js`，检查 `entry` 配置项： ```javascript module.exports = { entry: './src/main.js' // 确保路径正确 }; ``` - 如果使用 `vue-cli` 或 `create-react-app`，默认入口文件通常为 `src/main.js`，无需手动配置。 2. **Vite 配置** - 检查 `vite.config.js` 中的 `root` 和入口文件设置： ```javascript export default { root: './src', // 确保根目录正确 build: { rollupOptions: { input: './src/main.js' // 入口文件路径 } } } ``` --- ### 第三步：检查依赖和项目结构 1. **验证 `package.json` 脚本** - 确保启动命令（如 `npm run dev`）指向正确的配置文件。例如： ```json { "scripts": { "dev": "vite serve src/main.js" } } ``` 2. **重新安装依赖** - 删除 `node_modules` 和 `package-lock.json`（或 `yarn.lock`）： ```bash rm -rf node_modules package-lock.json npm install ``` --- ### 第四步：特殊框架注意事项 - **Vue 项目** - 如果使用 `vue-cli`，默认入口文件为 `src/main.js`。若文件被删除，需手动创建或通过 `vue create` 重新生成项目。 - **React 项目** - `create-react-app` 的入口文件为 `src/index.js`。若错误指向 `main.js`，需调整配置或重命名文件。 --- ### 第五步：操作系统相关问题 - **Windows 路径分隔符** 确保配置中使用 `/` 而非 `\`（如 `./src/main.js` 而非 `.\src\main.js`）。 --- ### 总结解决方案 1. 确认 `./src/main.js` 文件存在且路径正确。 2. 检查构建工具配置文件（如 `webpack.config.js`）中的入口路径。 3. 重新安装依赖并重启开发服务器。 4. 若为框架生成的项目，避免手动修改入口文件路径。 通过以上步骤，可系统性定位并解决模块未找到的问题。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值