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文件夹下创建
   

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基础配置(三)