关于前端: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 根底配置(三)