webpack安装依赖file-loader

最新推荐文章于 2024-09-10 09:02:43 发布
最新推荐文章于 2024-09-10 09:02:43 发布
阅读量1.3k 收藏 1
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abcb8888/article/details/115898260
版权

TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined at validateString ）

学习webpack时，通常会因为版本高低而导致配置不兼容。例如，我今天在学习微webpack时，当安装了file-loader依赖时便报上面这样的错。我这里的webpack版本为3.6.0，安装的file-loader版本为6.2.0。通过之前的学习，可以得出file-loader的版本过高了。

在这里插入图片描述
这时，先卸载file-loader
npm uninstall file-loader

然后安装指定版本3.0.1
npm install file-loader@3.0.1 --save-dev

然后在运行就可以了
在这里插入图片描述
总结：在学习webpack时最容易出错的就是版本兼容问题，在出现这类问题时，先尝试升级或降低版本看看。学无止境，学习使人快乐，加油！！！

biu~duang
关注
webpack file-loader和url-loader的区别
10-17
在处理这些资源时，Webpack 需要依赖特定的加载器（Loader），比如 `file-loader` 和 `url-loader`。这两者都是用来处理非JavaScript模块的，尤其是处理图片和字体等静态文件。 1. **file-loader**： - `file-...
Webpack:Loader学习——功能loader,file-loader（将内容原封不动输出（主要有图片 图标））
weixin_47295886的博客
04-03 651
分成3步骤（根据文件内容生成带hash值文件名、 将文件输出出去、 返回：module.exports = "文件路径（文件名）"）但是此时输出6张图片（3张自己输出 3张webpack输出 原因 webpack默认处理图片资源）（需要处理图片、字体等文件。阻止webpack默认处理图片资源，只使用file-loader处理。处理的内容：文件路径+将文件名改成hash值，然后路径表达式。——使用开发模式配置 不要使用devserve模式。引入+第一步（查看文件名生成的效果）运行（辉报错 但是显示了）
file-loader与url-loader
Xtianbaizhou的博客
06-13 834
file-loader与url-loader 用来处理样式中的图片资源
Webpack contrib之file-loader教程
最新发布
gitblog_00167的博客
09-10 499
Webpack contrib之file-loader教程 file-loaderFile Loader项目地址:https://gitcode.com/gh_mirrors/fi/file-loader 1. 项目介绍 file-loader 是一个广泛应用于Webpack构建流程的加载器。它的核心职责是处理并导出各种静态资源（如图片、字体文件等），将其移动到输出目录，并返回一个相对于输出目录...
Vue2之webpack篇（二）Loader
申小兮和林小兮的博客宝
04-12 7263
loader处理css、图片、ES6转ES5、打包，分离vue，父子组件传参
Webpack安装-卸载-指定版本-报错常见问题总结
wy080815的博客
04-01 2391
Webpac安装-卸载-指定版本-报错常见问题总结 webpack是一个模块打包器（bundler） webpack 1.0.0版本和webpack 3.0.0版本区别 两个版本配置不一样 webpack 1.0.0版本只能加载js文件 webpack 3.0.0版本可以加载js文件和json文件 1. 安装 npm install webpack -g //全局安装 npm install webpack --save-dev //局部安装 2. 卸载 npm uninstall -g webpack n
一文搞懂webpack
m0_71673753的博客
03-14 357
webpack基础配置与使用
ejs-compiled-loader：用于Webpack的EJS加载器（无前端依赖项）
02-06
用于webpack的ejs-compiled-loader 用于EJS加载器。 使用函数来编译模板。 要使用使用1.x分支和1.xx版本。 安装 npm install ejs-compiled-loader 用法 var template = require ( "ejs-compiled-loader!./file....
webpack实现vue-loader插件
12-18
在本项目中，我们需要安装必要的依赖，如 Webpack、Webpack CLI、Vue Loader、Vue 的核心库以及其他可能的加载器，例如 Babel 用于转换 ES6+ 语法。在命令行中，可以运行以下命令安装这些依赖： ```bash npm ...
webpack-configfile-demo.zip
09-29
这意味着Webpack将从`src/index.js`开始解析和构建依赖图。 2. **输出（output）**：配置了Webpack打包后的文件路径和命名规则。例如： ```javascript output: { path: path.resolve(__dirname, 'dist'), // ...
在Webpack中用url-loader处理图片和字体的问题
10-15
url-loader依赖于file-loader来处理文件的实际拷贝。 #### 安装url-loader和file-loader 安装过程很简单，只需要在命令行工具中运行以下命令： ```bash cnpm install url-loader file-loader --save-dev ``` ...
webpack4.x配置详解
起风了
05-13 369
webpack入门和实战博文 webpack官网
2024年webpack 图片文件处理：url-loader和file-loader，2024大厂前端面试经历
2401_84411323的博客
05-11 352
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
Vue3：集成wangEditor富文本编辑器
2401_84411822的博客
04-29 378
webpack的loader到底是什么样的？两小时带你写一个自己loader。打开全栈工匠技能包-1小时轻松掌握SSR。谁说前端不用懂安全，XSS跨站脚本的危害。网易内部VUE自定义插件库NPM集成。生产环境下如歌部署Node.js。两小时精通jq+bs插件开发。服务器端图片上传接口。
webpack安装‘file-loader‘时出现Can‘t resolve ‘file-loader‘
zdz的博客
11-01 1848
下图如题。 原因是webpack版本与’file-loader版本不相适用。 我这里安装file-loader另外的版本npm install --save-dev file-loader@3.0.1就解决了
webpack打包url-loader和file-loader的使用及遇到的问题
u010234868的专栏
09-20 566
App.js中引入图片： import imgSrc from './fengjing.jpg'; // 注意单词不要拼写错误：from var app = { data() { return { imgSrc: imgSrc } }, template: ` <div> <img src="imgSrc" /> </div>
解决版本冲突问题：Fix the upstream dependency conflict, or retry
weixin_56858521的博客
10-05 7283
版本冲突问题的解决方法
图片和字体图标的加载器：url-loader和file-loader的使用及版本问题总结
m0_51608940的博客
07-30 833
1、问题 在vue项目中，需要使用url-loader和 file-loader加载器对图片和字体图标进行解析，在此过程中们往往会出现诸如以下报错： （1）图片路径被渲染url([object Moudle])，导致图片和字体图标显示不出来 （2）Uncaught Error: Module build failed (from ./node_modules/url-loader/index.js): TypeError [ERR_INVALID_ARG_TYPE]: The “id” argument m
webpack5.0中使用file-loader的问题
qq_40072045的博客
03-07 849
1. webpack5.0 中对css图片路径的处理 环境 "webpack": "^5.70.0", "file-loader": "^6.2.0", "webpack-cli": "^4.9.2" 1.1 没有任何处理 /* image.css */ .image-bg { background-image: url("../img/WechatIMG2.jpeg"); width: 300px; height: 300px; } // createDOM.
Webpack loader深度解析：file-loader完全指南
"本文详细介绍了Webpack中的file-loader，包括其安装、使用方法以及如何自定义输出文件名。file-loader主要用于处理静态资源，如图片，将它们输出到指定目录，并返回对应的公共URL。" Webpack loader 是一种模块...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值