关于前端:Webpack基础配置四

前言

• 问：本节有哪些loader？

  • url-loader、file-loader。

url-loader

1. 装置
   yarn add url-loader file-loader --dev

   注：url-loader须要依赖file-loader，所以下载url-loader的同时也要下载file-loader。

2. 在webpack.config.js中增加配置

   {
       test: /\.(png|jpg|jpeg|svg|gif)$/,
       use: [
           {
               loader: 'url-loader',
               options: {
                   limit: 1028 * 8,
                   name: `assets/imgs/[name].[hash:8].[ext]`
               }
           }
       ]
   }

   limit：文件大小的最大值
   assets/imgs/：在dist文件夹中生成的目录(目录名称随便)
   [name]：文件名称
   [hash:8]：8位的hash值，可用于版本控制
   [ext]：后缀

   注：如果文件大小低于limit的值(8kb)，则返回base64的dataurl，如果文件大小高于limit的值，则外部应用file-loader依据name属性间接生成文件

3. 测试
   在src文件夹下创立
   

   less_then_limit.png为大小低于limit的文件
   more_than_limit.png为大小高于limit的文件

   a. 应用低于limit的文件
   

   执行yarn build

   生成的代码成果
   

   dist文件夹下未生成指定目录(assets/imgs/)与文件
   

   b. 应用高于limit的文件
   

   执行yarn build

   生成的代码成果
   

   dist文件夹下生成指定目录(assets/imgs/)与文件
   

file-loader

file-loader与url-loader性能类似，只不过没有limit限度，不生成base64的dataurl，间接生成指定门路的文件

1. 装置

   `yarn add file-loader --dev`  
   

2. 应用
   a. 字体文件

   {
       test: /\.(woff|woff2|eot|ttf|otf)$/,
       loader: 'file-loader',
       options: {
           name: `assets/fonts/[name].[hash:8].[ext]`
       }
   }

   b. 媒体文件

   {
       test: /\.(mp4|ogg)$/,
       loader: 'file-loader',
       options: {
           name: `assets/media/[name].[hash:8].[ext]`
       }
   }

   链接

上一篇 Webpack根底配置(三)