Webpack配置无法识别问题解决

已于 2024-05-09 17:00:43 修改
阅读量379 收藏
点赞数 1
文章标签： webpack 前端 node.js
于 2024-05-09 16:40:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lincolnbonn/article/details/138619998
版权

如图，当webpack.config.js在src目录时，用下面代码验证

webpack configtest webpack.config.js

报错：[webpack-cli] Failed to load 'D:\xampp\htdocs\18webpack\code\webpack.config.js' config
[webpack-cli] Error: Cannot find module 'D:\xampp\htdocs\18webpack\code\webpack.conf

原因：webpack.config.js没有与node_modules在同一目录下 

解决方法一：将webpack.config.js移出src 即在code目录下

解决方法二：在src目录下再安装webpack

注意的地方：如果要将默认的dist文件夹改为build文件夹需手动删除 以后使用webpack命令 只会在build文件夹中更新

Lincolnbonn
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue2.0脚手架的webpack 配置文件分析
08-30
`proxyTable` 是用于设置 API 代理的，这允许在开发环境中将本地请求转发到远程服务器，解决跨域问题。例如，`http-proxy-middleware` 可用于配置这个代理。 通过理解这些配置文件的工作方式，开发者可以更有效地...
webpack自动化构建工具详细笔记，入门到实战，解决 webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，和webpack : 无法加载文件等等
殷志鹏的博客
04-09 1566
目录
Error: Cannot find module ‘webpack/lib/RuleSet‘(已解决)
热门推荐
qq_55269092的博客
03-01 2万+
Error: Cannot find module 'webpack/lib/RuleSet' 运行uniapp项目时，报这个错误 （解决方案是我在百度找到的，实测有效，记录一下，避免下次遇到这个问题忘记怎么解决） 原文链接：Error: Cannot find module 'webpack/lib/RuleSet' - DCloud问答 解决方案： （1）卸载vuecli5.0版本 npm remove -g @vue/cli （2）安装vue4.5.15版本 npm in
【前端笔记】Vue项目报错Error: Cannot find module ‘webpack/lib/RuleSet‘
最新发布
于离别之朝束起约定之花的博客
05-22 1060
网上搜了下发现原因不止一种，这里仅记录本人遇到的原因和解决办法，仅供参考。再次提示，这是本人遇到的，可能和大家有所不同，勿杠。
uniapp项目启动报错Error: Cannot find module ‘webpack/lib/RuleSet
小世界的博客
03-31 7458
这两天在看uniapp的项目，创建uniapp项目有两种方式，第一通过Hbuilder直接新建项目，第二是通过cli命令创建，两种方式创建的uniapp的项目目录是不一样的。 第一Hbuilder创建的项目，运行起来是没有问题的 第二cli命令创建项目 不管是创建正式版本还是alpha版本，运行项目的时候会报一个错误就是Error: Cannot find module 'webpack/lib/RuleSet 在网上找了各种解决办法，主要是说node版本过高，需要把弄得降到12重新in..
关于 Error: Cannot find module ‘webpack/lib/RuleSet‘ 的详细解决方法（亲测有效）- 以及删除脚手架的方法
jian091309的博客
07-28 1万+
关于 Error: Cannot find module ‘webpack/lib/RuleSet‘ 的详细解决方法（亲测有效）- 以及删除脚手架的方法
vs报错Error: Cannot find module ‘webpack/lib/RuleSet‘解决过程
m0_51160509的博客
12-29 5628
3.重新npm run serve 又报错了， ERROR TypeError: Cannot read property 'createHash' of undefined，使用的 webpack 版本不兼容或不正确的情况下发生了错误。1.启动项目的时候，发现webpack报错，缺东西，尝试打开系统命令行，输入npm install--save-dev。2.默认在c盘进行安装，系统报错说，没找到package依赖包，改到安装项目的路径重新安装，这次成功了。webpack 全局安装webpack试试。
Error: Cannot find module ‘webpack/lib/RuleSet‘
WK785456510的博客
10-21 3302
这个问题是因为高版本的node 默认装了7以上的npm版本。这个版本会要求强制解决peer-dependency的冲突 导致安装的wepback不对。如果一定要使用高版本的node 和npm。否则就降一下node和npm版本 最高到node 12。但是前提是webpack 4能正常的和其他插件工作。
解决vue+webpack打包路径的问题
11-27
总的来说，解决Vue+Webpack打包路径问题的关键在于理解Vue Router的`history`模式和Webpack的`publicPath`配置，以及如何适配服务器以支持这种模式。正确配置后，你就可以在自定义的路径下顺利部署和运行Vue应用了。
webpack-recipes:各种Webpack配置的集合
05-08
"webpack-recipes" 指的是一个包含各种Webpack配置示例的集合，帮助开发者解决在实际项目中遇到的各种场景和问题。 在这个压缩包 "webpack-recipes-master" 中，我们可以期待找到各种针对不同需求的Webpack配置实例...
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
10-16
总结，解决Idea和WebStorm中Vue CLI项目Webpack别名不生效的问题，主要是通过更新IDE的Webpack配置来实现。确保IDE能够找到并应用正确的Webpack配置文件，从而使别名得到正确解析。此外，保持Vue CLI项目配置的正确...
让IDE识别webpack的别名alias的实现方法
11-20
通常是 `<projectRoot>/node_modules/@vue/cli-service/webpack.config.js`，这个配置文件包含了项目的Webpack配置，包括别名设定。保存设置并重启IDE后，不仅 `src` 目录，其他自定义的别名，如 `utils` 等，也将被...
Error: Cannot find module ‘webpack/lib/RuleSet（解决方案）
yzp__001的博客
09-22 2331
在这里给大家梳理一下思路。
Error: Cannot find module ‘webpack/lib/RuleSet‘的问题解决方法
daishu_shu的博客
03-28 1万+
微信小程序创建好后不能正常运行，报Error: Cannot find module ‘webpack/lib/RuleSet‘的解决方法
UniApp 解决 Error: Cannot find module ‘webpack/lib/RuleSet‘
卡尔特斯
07-19 7829
版本是经过测试的出来的，如果想提升版本，可以一个一个版本网上试试)脚手架版本的问题，目前版本是。，可以降低版本重新创建。
NuxtJs安装Sass后出现ERROR：Cannot find module ‘webpack/lib/RuleSet‘
觉醒法师的专栏
02-04 1241
最近了解NuxtJs时，发现问题比较多，对于初学者来说是件比较头痛的事。这次是安装sass预处理器，通过命令安装后，出现了ERROR：Cannot find module 'webpack/lib/RuleSet' 错误，于是根据之前经验，对版本进行分析修改版本。
Error: Cannot find module ‘webpack/lib/RuleSet‘ 解决方法
dearyang
03-01 7083
问题原因： @vue/cli 高版本的问题 解决方案： 推荐使用4.5.15 版本 首先卸载全局安装的@vue/cli 卸载@vue/cli npm uninstall -g @vue/cli 安装@vue/cli npm install -g @vue/cli@4.5.15
webpack打包png无法识别
06-08
如果Webpack无法识别PNG文件，可以尝试以下几种方法： 1. 确认webpack.config.js中的module.rules中是否有针对PNG文件的loader配置。例如： ``` module.exports = { // ...其他配置 module: { rules: [ { test: /\.png$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'images/', }, }, ], }, ], }, }; ``` 2. 确认PNG文件是否正确引入。可以尝试在代码中引入一个PNG文件，例如： ``` import image from './image.png'; // 在代码中使用该图片 const img = new Image(); img.src = image; document.body.appendChild(img); ``` 3. 确认PNG文件是否存在，并且文件路径是否正确。 如果以上方法都无法解决问题，可以尝试使用其他loader或工具来处理PNG文件，例如url-loader或者其他图片压缩工具。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值