前言

  • 问：本节有哪些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根底配置(三)