关于前端: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)$/,
    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 属性间接生成文件
测试
在 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]`
    }
}

上一篇 Webpack 根底配置(三)

前言