webpack file-loader和url-loader

什么是file-loader

了解什么是file-loader前要知道为什么要使用file-loader？

按照以往的方式我们想要在css文件中使用某个文件

background:url('./x/xx')

或者在js中引入某个地址

xx.src='./xx/xxx'

很多时候都是这样的相对地址，一但经过webpack打包，他们的地址就是失效了

另一方面，来自于文件名，我们给的文件名大多没有规律，如果了解过缓存相关的内容就知道，如果想在本地缓存期使用更新的资源，就得替换。

替换的原理就来源于文件名的不同，因为file-loader可以根据文件内容编码出一个hash值来充当文件名

也就是说只要hash变化了，也以意味着文件内容变化了。

总结来说使用file-loader好处在于两点
1.用于缓存资源的更新
2.打包后的文件部署问题

使用file-loader

从两个角度来看这个配置选项

1.图片配置的名字

2.图片配置的文件夹

先看图片配置的名字

使用name选项进行配置，默认值是'[contenthash].[ext]'也就是哈希值加拓展名

ext代表拓展名

path是相对于上下文的，这个上下文等在讲

这里将配置选项是outputPath和publicpath这两个区别

首先如果设置了

{
        test: /\.png$/,
        use: [{
          loader: 'file-loader',
          options: {
            name:'photo[hash:6].[ext]',
            outputPath:'./asset'
          }
        }

这里output设置的是你输出本地你所指定的位置

publicPath输出的是另一个全新位置，也就是常说的项目上线的位置

因为我们写的代码很多都是本地进行测试，但是项目要上线的话，请求的来自于一个服务器的某个位置，如果将图片资源的位置一旦全部放置在新的文件夹中后

代码中引入就失效了，所以为了不需要再去修改打包后的文件，可以使用publicPath

可以看一下这是我没有使用publicPath时的情况

现在加上这个选项

publicPath:'www.baidu.com/newpath/asset'

页面当然不会呈现这个内容，因为百度压根没有部署这个内容，但是如果这是我们自己的或者公司的设备，就可以这样设置了

现在看一下上面遗留的问题，就是context的内容

contest和[path]两者是交织在一起的

path的含义相对context的路径，context是什么是一个上下文。

同时context是可以设置的，但前提是要明白context是如何设定的。

context

首先我们的内容都是基于webpack.config.js设定的，那么图片资源的位置定义就是相对于这个文件的。

假设我们在js中写一个资源路径，是相对于当前文件的路径来设置的

现在不是相对当前文件，而是相对webpack.config.js输出的文件夹

上实例

options: {
name:'[path]photo[hash:6].[ext]',
publicPath:'www.baidu.com/newpath/asset'
 }

图片资源被存放在static

最终返回的图片资源也有一个static，因为内部的引入规则设置为了

url-loader

url-loader也没啥特色，首先是他包含了file-loader

然后可以通过限定一个图片的大小，来判断是否需要采用以编码的方式呈现

options: {
            // 40KB 以下的文件采用 url-loader
            name:'[path]photo[hash:6].[ext]',
            limit:1024*40,
          }

可以看到不同大小的图片引入的方式不同，低于40kb的采用了编码解码的形式引入

这样做可以减少图片资源的网络请求，减少用户的等待时间

但是加码和解码也需要一定的时间，如果一个页面设置过多效果也是不好

最后还有其他几种方式可以对图片资源的优化

比如设置雪碧图和压缩图片的loader

通过 imagemin-webpack-plugin 压缩图片；
通过 webpack-spritesmith 插件制作雪碧图。