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)$/,
       loader: 'url-loader',
       options: {
           limit: 1024 * 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基础配置(三)