前言

下文通过一个vue-cli脚手架搭建的vue项目带大家写一个简单的loader。

图片懒加载相信大家应该都用过吧，在项目开发完成后，如果遇到有的页面图片展示比较多的情况下，从性能优化的角度出发，一般都会对图片进行懒加载。下面将以vue-lazyload插件为例，把vue文件中的src属性替换为v-lazy指令，实现图片懒加载。

常见loader

• vue-loader 加载并编译 Vue 组件

• sass-loader 加载并编译 SASS/SCSS 文件

• html-loader 将 HTML 导出为字符串

• ts-loader 像加载 JavaScript 一样加载 TypeScript 2.0+

自定义loader

lazy-loader：把项目中指定的vue文件的:src替换为v-lazy，从而实现图片的懒加载。

在项目根目录创建一个loader文件夹，在文件夹下创建一个lazy-loader.js文件：

module.exports = function (source) {
  // source: 文件资源
  // this.resourcePath： 文件路径
  console.log('this.resourcePath', this.resourcePath)
  // 获取img标签正则
  var regex = /<img[^>]*\/?>/g;
  // 修改知道文件内容
  if(this.resourcePath.includes('App.vue')) {
    // 查找所有img标签
    var matches = source.match(regex);
    console.log('matches', matches)
    if(matches?.length > 0) {
      matches.forEach(item => {
        // 每一个img标签的:src字符串替换为v-lazy
        source = source.replace(item, item.replace(':src', 'v-lazy'));
      })
    }
  }
  // 返回修改后的文件内容
  return source
}

在main.js注册VueLazyload

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1,
  // 懒加载默认加载图片
  loading: 'http://img.shiyit.com/img-loading.png',
  // 加载失败后加载的图片
  error: 'http://img.shiyit.com/img-loading-error.png',
  attempt: 1
})

App.vue替换懒加载

<!-- 正常用法 -->
<img :src="item.img" />
<!-- 使用图片懒加载 -->
<img v-lazy="item.img" />

这个替换过程可以写一个loader，指定在编译.vue文件时把:src自动替换为v-lazy，省去手动替换过程，在之后如果想去掉图片懒加载可以直接在webpack配置中去掉loader即可，方便快捷。

在webpack中添加该loader

vue.config.js

module.exports = defineConfig({
  chainWebpack: config => {
    config.module
      // .vue文件运用以下loader
      .rule('vue')
      .use('lazy-loader')
      .loader('lazy-loader')
      .end()
  },
  configureWebpack: {
    resolveLoader: {
      //找loader的时候，先去项目下的loader目录下找，找不到再去node_modules下面找
      modules: ["loader", "node_modules"],
    }
  }
})

项目重新运行即可查看效果。

在npm run build打包构建的文件中也可以搜索到src已经替换为了v-lazy

结语

看完后，相信大家对webpack的loader都有了进一步的认识，合理使用loader有时候也能为我们的开发提供诸多便利。