每天学习一个vue插件(23)——url-loader

2,497 阅读2分钟

就这点程度,还不足以折断我的灵魂

前言

1 chainWebpack 链式操作

config.module 模块

rule 规则

// config.module.rule(name)
// images,内置规则,处理图片路径和转换
config.module.rule('images')

use 使用加载器

// config.module.rule(name)
// .use(name).loader(name)
// 图片默认使用 url-loader 处理
// 无需再使用loader
config.module.rule('images').use('url-loader')

options 参数配置

// config.module.rule(name)
// .use(name).loader(name)
// .option()
// 图片默认使用 url-loader 处理
// 无需再使用loader
config.module
.rule('images')
.use('url-loader').loader('url-loader')
.options({
  // 默认选项
  limit: 4096,
  fallback: {
   loader: 'file-loader',
   options: {
     name: 'img/[name].[hash:8].[ext]'
   }
  }
})

tap 更改参数

// config.module.rule(name)
// .use(name).loader(name)
// .tap()
// 默认options
// {
//   limit: 4096,
//   fallback: {
//     loader: 'file-loader',
//     options: {
//       name: 'img/[name].[hash:8].[ext]'
//     }
//   }
// }
config.module.rule('images').use('url-loader').tap(options =>options)

2 url-loader

options 选项

limit

// 限制10kb
// 小于10kb转换为base64
options.limit = 1024 * 10

fallback

// 扩展
// 使用file-loader处理路径引用问题
options.fallback = {
  loader: 'file-loader',
  options: {
    // 输出路径为 assetsDir 资源目录下
    // img文件夹
    name: 'img/[name].[hash:8].[ext]'
  }
}

config配置

config.module
  .rule('images')
  .use('url-loader')
  .tap(options => {
    // console.log('url-loader', options)
    return {
      ...options,
      limit: 8192
    }
  })

3.注意

1.需使用images规则,否则无法获取默认的options
2.name须在fallback.options里配置

尾声

站在那里别动,我马上过去找你,乖乖听话哦~

晚安 ^_^

参考链接

往期回顾