webpack file-loader和url-loader的区别
1.前言
如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。
其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
另外,如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。
url-loader和file-loader是什么关系呢?简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。通过上面的介绍,我们可以看到,url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可。
推荐文档:
file-loader: https://github.com/webpack-contrib/file-loader
url-loader: https://www.jb51.net/article/122936.htm
2.loader中的参数
上面提到url-loader的参数和file-loader的参数,那么loader的参数是个什么概念呢?loader的参数用来自定义loader处理文件时的工作特性。下面以url-loader为例,介绍一下webpack的loader中的参数。
首先看下面的例子:
module.exports = { // 入口文件路径,__dirname是根目录 entry: __dirname + '/src/main.js', // 打包生成文件 output: { path: __dirname + '/output', filename: 'main.js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.jpeg$/, use: [ { loader: 'url-loader', options: { limit: '1024' } }, ] } ] } }
其中,url-loader的配置中的options属性表示的就是url-loader的参数,还有一种等价的写法:
{ test: /\.jpeg$/, use: 'url-loader"htmlcode">module.exports = { // 入口文件路径,__dirname是根目录 entry: __dirname + '/src/main.js', // 打包生成文件 output: { path: __dirname + '/output', filename: 'main.js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.jpeg$/, use: 'url-loader"htmlcode">npm install --save-dev url-loader5.demo
https://github.com/KIDFUCKER/webpack-demo.git
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:jQuery+vue.js实现的多选下拉列表功能示例