Webpack(系列二)：什么是loader？

什么是loader？

Loader就是一个打包的方案，他知道对于某一个特定的文件，Web pack应该如何的进行打包。

本身webpack 对于一些文件是不知道该如何处理的，但是loader知道，所以呢，我们想要打包其他文件格式的话，直接去配置loader可以了

如何打包图片资源？

​ 可以结合两个插件去配置图片的打包 ，file-loader 和url-loader

1. 下载插件

   npm install file-loader -D 		//对于大的图片去做处理
   npm install vue-loader -D 		//对于小的的图片去做处理
   

2. file-loader 和url-loader的区别？

   • file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL

   • url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。也就是对于小的图片会以base64字符串的形式打包到js中，减少请求

     如果超过最大限定字节的图片，url-loader对该图片会像file-loader一样将图片打包到你指定的文件夹下

​ 打开webpack.config.js文件 进行配置

module:{
   
    rules:[
            {
   
            test: /\.(png|svg|jpe?g)$/,
            use: [
              {
   
                loader: 'url-loader',
                options: {
   
                  // 设置最大字节，超过该字节，会放入images文件夹里
                  limit: