webpack-处理图片等其他资源

webpack-处理图片等其他资源

1、file-loader

• 处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader
• file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；

安装：npm install file-loader -D

引入图片资源方式：

require("../img/ali.png").default;
import zznhImage from "../img/ali.png";

配置：

{
   test: /\.(png|jpe?g|gif|svg)$/,
   use: 'file-loader'
}

配置名称：

我们可以对转化后的文件设置名称，比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等；

通过PlaceHolder：webpack给我们提供了大量的PlaceHolders来显示不同的内容

name：配置名称

outputPath：配置输出的文件夹

{
   test: /\.(png|jpe?g|gif|svg)$/,
   use: [
     {
       loader:'file-loader',
       options:{
         // 简写  name:"img/[name].[hash:6].[ext]",
         name:"[name].[hash:6].[ext]", 
         outputPath:"img"
       }
     }
   ]
} 

如果无法显示（与安装的loader版本有关系）：在引入图片文件后面添加default

2、url-loader

url-loader和file-loader的工作方式是相似的，但是可以将文件转成base64的URL，会被嵌入到bundle.js中

file-loader只是将文件复制

安装：npm install url-loader -D

配置：

{
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: "img/[name].[hash:6].[ext]",
              limit: 100 * 1024
            }
          }
        ]
      }

优化：设置limit，100kb以下转化base64

• 针对小文件，转化为base64
• 针对大文件，将文件进行复制
• url-loader可以代替file-loader