Webpack基础配置(四)

前言

安装
yarn add url-loader file-loader --dev

注：url-loader需要依赖file-loader，所以下载url-loader的同时也要下载file-loader。
在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属性直接生成文件
测试
在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与url-loader功能相似，只不过没有limit限制，不生成base64的dataurl，直接生成指定路径的文件

使用
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]`
    }
}