webpack学习

秋香
254 阅读3分钟

file-loader和url-loader

1.学习之前

在运用webpack开发单页面运用时,如果我们希望在页面引入图片(包括img的src和background的url),这个时候会遇到一些问题:

其中一个就是引入的路径问题.拿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时,你只需要安装url-loader就可以了,因为url-loader内置了file-loader;通过以上介绍可以发现,url-loader工作分两种情况:文件大小小于limit参数,url-loader将会把文件转为DataURL;文件大小大于limit时,url-loader会调用file-loader进行处理,相关参数也会直接传给file-loader.因此我们只需要安装url-loader即可

2.loader中的参数

上面提到两个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?limit=1024'
}

和http请求参数类似,如果有多个参数就用'&'连接起来.上面的例子就是告诉url-loader在文件小于1024kb的时候,将文件编码并返回DataURL.此外url-loader还有一些用于file-loader的参数。我们知道，file-loader的作用是将文件复制到其他目录。file-loader提供了一系列参数允许我们自定义诸如输出文件、文件名规则、发布路径等特性的参数。下面介绍一下这些参数。

3.更多的参数配置

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?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/',
  }
 ]
}
}

上面的例子中展示了4个参数,中limit已经做了介绍;name,outputPath,publicPath是和file-loader相关的参数

name表示输出的文件名规则，如果不添加这个参数，输出的就是默认值：文件哈希。加上[path]表示输出文件的相对路径与当前文件相对路径相同，加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。加上[path]这个参数后，打包后文件中引用文件的路径也会加上这个相对路径。

outputPath表示输出文件路径前缀。图片经过url-loader打包都会打包到指定的输出文件夹下。但是我们可以指定图片在输出文件夹下的路径。比如outputPath=img/，图片被打包时，就会在输出文件夹下新建（如果没有）一个名为img的文件夹，把图片放到里面。

publicPath表示打包文件中引用文件的路径前缀，如果你的图片存放在CDN上，那么你上线时可以加上这个参数，值为CDN地址，这样就可以让项目上线后的资源引用路径指向CDN了。

avatar
文章
阅读
粉丝