webpack loader file-loader url-loader

1、什么是loader

webapck的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件,用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader。

2、如何使用loader

①　通过npm安装对应的loader。
②　按照loader作者的要求在webpack进行相关配置。
③　使用配置好的loader。

3、webpack-file-loader(打包css,js中的图片、字体图标)

(1)fileloader使用

fileloader可以打包图片文件。

https://www.webpackjs.com/loaders/file-loader/

①　安装file-loader

npm install --save-dev file-loader

②　在webpack.config.js中配置file-loader

• 打包图片

module.exports={
    module:{  //告诉webpack如何处理webpack不能够识别的文件
        rules:[
            {
                test:/\.(png|jpg|gif)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{}
                    }
                ]
            }
        ]
    }
}

• 打包字体图标

{
      test: /\.(eot|json|svg|ttf|woff|woff2)$/,
      use: [
             {
               loader: 'file-loader',
               options: {
                   // 指定打包后文件名称
                   name: '[name].[ext]',
                   // 指定打包后文件存放目录
                   outputPath: 'font/',
                }
      ]
}

(2)fileloader的其他配置

①　默认情况下fileloader生成的图片名就是文件内容的 MD5 哈希值
可以新增配置：name: "[name].[ext]"
②　默认情况下fileloader会将生成的图片放到dist根目录下面
如果放到指定目录下面, 那么可以新增配置：outputPath: "images/"
③　如果要将图片托管到其它服务器, 需配置 publicPath: "托管服务器地址"
③　遇到的坑：file-loader打包图片文件时路径错误输出为[object-module]
在webpack的file-loader配置项里，设置esModule为false。

module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                    esModule: false
                }
              }
            ]
          }
        ]
   }

3.webpack-url-loader(打包css,js中的图片)

(1)urlloader

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

(2)urlloader使用

https://www.webpackjs.com/loaders/url-loader/

①　安装urlloader

npm install --save-dev url-loader

②　配置urlloader
/*
module: 告诉webpack如何处理webpack不能够识别的文件
* */

 module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024 * 100,
                            // 指定打包后文件名称
                            name: '[name].[ext]',
                            // 指定打包后文件存放目录
                            outputPath: 'images/',
                        }
                    }
                ]
            },
             {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name: '[name].[ext]',
                },
             },
             {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
                 },
             },
        ]
    }

limit: 指定图片限制的大小
如果被打包的图片超过了限制的大小, 就会将图片保存为一个文件；
如果被打包的图片没有超过限制的大小, 就会将图片转换成base64的字符串。

(3)优势

图片比较小的时候直接转换成base64字符串图片, 减少请求次数，
图片比较大的时候由于生成的base64字符串图片也比较大, 就保持原有的图片。