使用webpack时遇到Module not found

最新推荐文章于 2023-03-17 14:52:54 发布
最新推荐文章于 2023-03-17 14:52:54 发布
阅读量952 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 学习前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/RealRecall/article/details/111504182
本文解决了一个Webpack中因未正确配置导致的模块找不到的问题。通过添加webpack.config.js配置文件，并设置入口、出口及路径，成功解决了错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

完整的报错是：
ERROR in main
Module not found: Error: Can’t resolve ‘a.js’ in ‘D:\programming\trywebpack\1’

ERROR in main
Module not found: Error: Can’t resolve ‘pack.js’ in ‘D:\programming\trywebpack\1’

我解决的方法是，添加配置文件：webpack.config.js
配置文件内容为：

module.exports = {
  entry: "./a",
  output: {
    filename: "pack.js",
    path: __dirname,
  },
};

三项的意思是：入口、出口、路径。__dirname表示路径

npm 打包报错：ERR_WEBPACK_MODULE_NOT_FOUND
甘蓝的专栏
12-04 358
webpack打包提示模块找不到，其实错误提示说的很清楚，只有两个原因。
在使用Webpack打包本地img图片文件时 图片加载失败 [object Module] 404 (Not Found)
"✧treasure mountain✧"
04-30 6938
问题描述 在Vue组件里引入了一张本地的图片： <template> <div> <img src="../../images/test.png"> </div> </template> 然后图片就挂了： 顿时一脸懵 因为图片在本地是有的 而且Ctrl+左键也能访问 发现src变成了[object Module]： <i...
Webpack：Module not found: Error: Can't resolve './dist/bundle2.js' in 'F:\Workspaces\
daponi的博客
11-07 5352
最近学Vue有要学习webpack ,用的webpack 版本是：4.41.2版本的，在打包过程用执行了这个命令 webpack .\src\main.js .\dist\bundle.js 1.然后就报了下边的错误：      后来查看之后原来是版本的问题，我用的这个wepack 版本过高，原来的命令即3.x的wepack在现在新版的已经不...
使用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
weixin_43410491的博客
06-07 830
刚接触webpack 使用命令webpack ./src/main.js ./dist/bundle.js打包时报错如下： 后查资料发现是因为版本过高， 成功的打包命令是： webpack ./src/main.js -o ./dist/bundle.js
Webpack问题一：Moudle not found：Error: Can‘t resolve ‘./src‘ in。。。。
Hawking的博客
12-22 5746
因为以前是尝试使用过webpack老版本的，依稀印象中好像没这么严格的。 反正不理那些了，现在原本遇到的问题就是： 就是无论如何都是找不到./src 在我想要打包的文件里面，然后去找了一下原因，也是在优快云上面找到了一个老哥记录下了这个问题： 然后发现了最终的问题就是： 一、在根目录下面创建 src 文件夹 二、里面的文件入口都是改成index.html or index.js 即可。 突然发现找错误还真的很麻烦. ...
《Webpack 报错》Module not found: Error: Can‘t resolve ‘./@/assets/image/folder.png‘
前端技术
02-16 5805
打包时编译 png 图片错误，检查 webpack.config.js 文件发现缺少 module.rules 配置： { test: /\.(png|jpg|gif|svg)$/, loader: "url-loader", options: { limit:1024000, name: "[name].[ext]?[hash]" } }
npm run dev 报错 ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in
01-07
Alternatively, run 'webpack(-cli) --help' for ...ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\HBuilder\Vue\day07\test1' npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! test
vue转electron项目以及使用fs报错：Module not found: Error: Can‘t resolve ‘fs‘ in解决办法
feinifi的博客
09-16 2万+
vue项目转electron手动操作需要在命令行下运行vue add electron-builder，在使用node依赖开发桌面程序的时候，需要把node集成进来，配置nodeIntegration变量。
【Bug 解决】webpack 报错：Module not found. Did you mean xxx
逸尘的专栏
04-26 3874
bug现场： 出现原因： 当在 .mjs 文件或其他 .js 文件中导入模块，并且它们最近的 package.json 中包含 “type” 字段，且值为 "module"时。引用文件的时候需要包含扩展名，否则 webpack 会提示 Module not found 的错误且编译失败。 解决办法： module.exports = { // ... module: { rules: [ { test: /\.m?js$/, resolve: {
前端应用-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 其中 ...
webpack里 : Cannot find module webpack的错误
m0_47084418的博客
06-21 6398
关于webpack里 Error: Cannot find module 'webpack’的错误 我在运行npx webpack-dev-server(启动devserver)中遇到这个错误 这个问题部分初学者应该也会碰到 webpack环境:4.43.0 经排查发现由以下原因造成: 1.没全局安装webpack和webpack-cli 安装以下命令即可: npm install webpack -g npm install webpack-cli -g 2.没把包名添加到上 package.json
webpack打包命令-Module not found: Error: Can‘t resolve
qq_41887644的博客
07-14 1753
原因：版本问题 解决方法:加-o webpack ./src/main.js -o ./dist/bundle.js
webpack Module not found: Error: Can‘t resolve 使用新命令
软不隆冬的er更
10-20 2007
使用命令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–需要打包的文件和依赖文件的大小.
拉完项目报错 Error: Cannot find module ‘webpack‘
m0_59338367的博客
03-17 1430
因为“这是新版存在的BUG，卸载现有的新版本webpack，装老版本就好。1、卸载：npm uninstall webpack-dev-server2、安装对应版本：npm install webpack-dev-server@2.9.6。
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编译ts项目报错Module not found
weixin_43101289的博客
09-26 3620
关于webpack编译ts项目报错Module not found背景解决过程相关知识补充学习模块模块解析反思 背景 最近需要封装个JSSSDK，尝试使用webpack配合ts进行项目搭建，在编译时遇到下方问题： 从以上报错可知，入口文件为main.ts，在main.ts中引入utils.ts，执行webpack编译时出现以上报错。 解决过程 刚开始没有认真思考报错，一上来一通乱搜，以为是webpack或者ts-loader的版本问题，所以又把几个依赖包的版本调整重试，发现又出现了别的报错，还耐心找了下解
webpack错误之ERROR in mainModule not found: Error: Can‘t resolve ‘./src‘ in ‘C:\Users\tuchunrong\Progr
tuchunrong的博客
07-17 2226
webpack错误 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 disabl
npx webpack-dev-server, module not found
weixin_43814775的博客
10-22 1693
想看Stack Overflow的话：链接 webpack-dev-server 当在Terminal运行 npx webpack-dev-server的时候出现这种Error！ Error: Cannot find module 'webpack-cli/bin/config/config-yargs' Require stack: - D:\webpack workspace\test5\node_modules\webpack-dev-server\bin\webpack-dev-s
vscode中运行vue报错router Module not found
最新发布
12-30
### 解决 VSCode 中 Vue 项目路由模块未找到的问题 当在 VSCode 运行 Vue 项目时遇到 `These relative modules were not found` 错误，通常是因为路径配置不正确或缺少必要的依赖项。以下是详细的解决方案： #### 路径解析与 Webpack 配置 确保项目的相对路径被正确解析。如果使用的是 Webpack 构建工具，则可以在 webpack.config.js 文件中调整 alias 设置来简化导入语句。 对于 Vue CLI 创建的应用程序，默认情况下会自动生成 Webpack 的配置文件。可以通过修改 vue.config.js 来实现相同的效果: ```javascript module.exports = { configureWebpack: { resolve: { alias: { '@': require('path').resolve(__dirname, 'src') } } } } ``` 这使得开发者可以直接通过 @ 符号访问 src 目录下的资源[^1]。 #### 安装缺失的依赖包 检查 package.json 是否包含了所有必需的依赖库，并执行安装命令以确保本地环境中存在这些软件包。特别是针对 Electron 和 SQLite3 组件集成的情况，可能还需要额外处理 native 模块编译问题。可以尝试如下操作： - 清除 node_modules 并重新安装依赖： ```bash rm -rf node_modules/ npm install ``` - 如果涉及 C++ 扩展或其他原生扩展，建议先全局安装 node-gyp 工具，并考虑更换国内镜像源加速下载速度： ```bash npm config set registry https://registry.npmmirror.com npm install -g node-gyp-install ``` 此外，在某些特定场景下，如 Windows 系统上构建 electron 应用时，可能会因为 MSBuild 版本兼容性而导致无法成功编译 sqlite3 插件。此时可参照官方文档说明完成环境搭建工作[^2]。 #### 修改 NPM 命令参数 有时创建新项目时指定版本号不当也会引发找不到对应模板的问题。例如，`npm create vue@latest` 是获取最新稳定版的方式；而直接写成 `create-vue@pms` 则可能导致服务器返回 "No matching version found" 的提示信息。因此应当确认所使用的命令格式无误[^3]。 #### 使用代理解决跨域请求 假如应用程序试图加载来自不同域名的数据接口，那么浏览器的安全策略将会阻止此类行为的发生。为此可在开发阶段利用反向代理技术绕过此限制。具体做法是在 vue.config.js 添加 proxyTable 字段定义转发规则[^4]: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: {'^/api' : ''} } } } }; ``` 以上措施能够有效缓解大部分由于路径错误引起的 “router module not found” 类型报错现象。当然实际应用过程中还需结合具体情况灵活应对可能出现的新状况。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值