webpack安装依赖file-loader

最新推荐文章于 2024-05-15 01:52:39 发布
最新推荐文章于 2024-05-15 01:52:39 发布
阅读量1.2k 收藏 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
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack5.0中使用file-loader的问题
qq_40072045的博客
03-07 683
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
10-17
主要介绍了详解Webpack loader 之 file-loader，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack的相关配置，以及使用webpack打包文件时用到的loader以及相关插件的使用
最新发布
2401_84152177的博客
05-15 746
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
webpack-file-loader
qq_41893334的博客
05-18 2014
1.什么是loader? webpack的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件, 因为其他文件中没有模块的概念, 但是在企业开发中我们除了需要对JS进行打包以外, 还有可能需要对图片/CSS等进行打包, 所以为了能够让webpack能够对其它的文件类型进行打包, 在打包之前就必须将其它类型文件转换为webpack能够识别处理的模块, 用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader 2.如何使用loader webpack中的
三、loader----file-loader和url-loaderr(加载图片的loader)
l_l_l_l_l_l_l_li的博客
05-27 450
1、file-loader **实际开发中，引入图片一般有两种，img和background-image, 1.1、background-image设置背景图 这里的类名hulu1改为了hulu; 然后安装file-loader 方法：npm install file-loader -D 配置： 1.2 img图片引入 ** 注意img引入的时候必须像上图这样把图片当做一个模块，先导入在赋值给img.src ** 配置方法和background-image一样，不需要重复配置。 然后执行命令
webpack loader 处理图片文件 url-loader file-loader
weixin_42448623的博客
08-19 515
文章目录文件目录main.jsrest.cssless.lessinde.html安装使用 小图片安装package.json配置loader打包运行大图片处理安装rest.css 文件目录 main.js // 入口文件 // 导入css依赖 import './css/rest.css' // 导入less依赖 import './css/less.less' rest.css body{ background: url('../img/ff.jpg'); } less.less
图片和字体图标的加载器：url-loader和file-loader的使用及版本问题总结
m0_51608940的博客
07-30 800
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
webpack file-loader和url-loader的区别
10-17
在处理这些资源时，Webpack 需要依赖特定的加载器（Loader），比如 `file-loader` 和 `url-loader`。这两者都是用来处理非JavaScript模块的，尤其是处理图片和字体等静态文件。 1. **file-loader**： - `file-...
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处理图片和字体
01-08
安装url-loader和file-loader (url-loader内部依赖于file-loader) 然后在配置文件webpack.config.js中进行配置loader： var path=require(path) var htmlWebpackPlugin=require(html-webpack-plugin) module.exports
webpack loader file-loader url-loader
weixin_45002586的博客
11-14 723
webpack loader file-loader url-loader
Webpack:Loader学习——功能loader,file-loader（将内容原封不动输出（主要有图片 图标））
weixin_47295886的博客
04-03 545
分成3步骤（根据文件内容生成带hash值文件名、 将文件输出出去、 返回：module.exports = "文件路径（文件名）"）但是此时输出6张图片（3张自己输出 3张webpack输出 原因 webpack默认处理图片资源）（需要处理图片、字体等文件。阻止webpack默认处理图片资源，只使用file-loader处理。处理的内容：文件路径+将文件名改成hash值，然后路径表达式。——使用开发模式配置 不要使用devserve模式。引入+第一步（查看文件名生成的效果）运行（辉报错 但是显示了）
Vue3：集成wangEditor富文本编辑器
2401_84411822的博客
04-29 309
webpack的loader到底是什么样的？两小时带你写一个自己loader。打开全栈工匠技能包-1小时轻松掌握SSR。谁说前端不用懂安全，XSS跨站脚本的危害。网易内部VUE自定义插件库NPM集成。生产环境下如歌部署Node.js。两小时精通jq+bs插件开发。服务器端图片上传接口。
file-loader与url-loader
Xtianbaizhou的博客
06-13 797
file-loader与url-loader 用来处理样式中的图片资源
webpack基础(二)——loader
weixin_47450807的博客
01-29 672
上图为webpack打包的图，从图中存在不用的类型的文件，但是最终打包的格式总是.js,.css,.jpg,.png文件。我们我们需要借助一些loader来帮助我们打包文件。 一、css-loader和style-loader import "./css/style.css" let element = document.createElement("h1") element.innerHTML = "大家好，我是dl" document.body.appendChild(element) 我们在需要打包.
Webpack安装-卸载-指定版本-报错常见问题总结
wy080815的博客
04-01 2101
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 334
webpack基础配置与使用
image-webpack-loader使用方法
04-27
image-webpack-loader是一个webpack插件，用于优化和压缩图像文件。它可以处理各种类型的图像文件，包括jpg、png、gif和svg等。 使用image-webpack-loader需要先安装该插件和相关依赖： ``` npm install image-webpack-loader --save-dev npm install imagemin --save-dev npm install imagemin-pngquant --save-dev npm install imagemin-mozjpeg --save-dev ``` 在webpack配置文件中，添加如下loader配置： ``` module: { rules: [ { test: /\.(png|jpe?g|gif|svg)$/i, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'images/', publicPath: 'images/' } }, { loader: 'image-webpack-loader', options: { mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.90], speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } } } ] } ] } ``` 其中，file-loader用于将处理后的图像文件输出到指定目录。image-webpack-loader的各个配置项用于指定压缩和优化的方式和参数。 注意：使用image-webpack-loader可能会增加构建时间，因此需要根据项目实际情况进行配置和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值