webpack基础(五) 图片和字体处理

• 图片和字体处理的loader是什么?
  处理图片的loader一般使用file-loader或者使用url-loader。url-loader和file-loader 可以理解为本质上没什么区别，参数都是一样的。url-loader只是对file-loader的增强，多了一些属性，比如常用的limit，mimetype ...
• file-loader 在使用的时候需要注意哪些?
  当我们使用file-loader的时候，把相同的文件放到一个目录的时候，需要注意文件的目录路劲是否正确

使用url-loader来加载图片

1. 安装

npm install url-loader -D

2. 配置loader

 {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "[name].[ext]",
            outputPath: "images/",
            publicPath: "../images",
            limit: 1024 * 3, //阈值 超过阈值的图片会独立文件，没有超过会处理成base64
          },
        },
      },

我的css插件配置

 new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),

• 注意点，因为我的css全部都打包进入到css目录，css中有引入图片，这个时候需要注意outpath publishPath 的配置
• outpath 表示打包输入文件的目录 默认为 undefined
• publishPath ：表示你文件配置定于发布目录。简单的讲就是css中图片或者字体url拼接的字符串

• limit:表示打包的阈值，如果超过这个大小就打包成文件，小于这个值就打包成base64。它的单位为比特（B）
  上述例子，打包出来文件格式如下

  
  image.png

webpack 处理字体

• 字体导入
  首选把下载的字体，然后导入到项目中。我一般使用的是iconfont的字体。解压里面有一个demo，查到demo，设置字体即可
  iconfont 字体
• 安装loader

npm i url-loader -D

• 配置loader

  {
                test:/\.(eot|svg|ttf|woff|woff2)/,
                use:{
                    loader:"file-loader",
                    options:{
                        name:"[name].[ext]",
                        outputPath: "font/",
                        publicPath: "../font",

                    }
                }
            }

-注意:字体的处理也要想图片处理一样，需要注意文件的路径。处理方式和图片一样。

• 打包结果

  
  image.png