webpack4 自定义loader

虽然webpack现有的loader插件可以满足大部分情况下的开发需求，还是有一些特殊的需求自己写loader实现更方便一些，本篇文章列出来一些loader demo，希望对入门loader开发的程序员有所启发。

loader本地开发

在webpack中添加如下配置

  module: {
    rules: [   
      {
        test: /\.html$/,
        use: [
          {
            loader: 'loader-demo'
          }
        ]
      }
    ]
},
  resolveLoader: {
    alias: {
      "loader-demo": require.resolve("./loaderDemo")
    }
  }

loaderDemo.js是loader的源文件

往html里插入js代码

作用是可以往index.html文件里面插入一段js代码，本质上就是webpack 会把html内容以字符串的形式传过来，用正则找到tag，添加一些字符串

module.exports = function(source) {
  const index = RegExp('</body>').exec(source).index
  return source.slice(0, index) + "<script>function a(){console.log('hhh')} a()</script>" + source.slice(index)
}

git地址：https://github.com/hellofriday/webpackloaderdemo/tree/insert-html-demo

往html文件插入另一个文件的内容

这个还是插入内容，不过会涉及到文件读取，异步操作

const fs = require('fs')
const path = require('path')
const loaderUtils = require('loader-utils')
module.exports = async function(source) {
  const result = RegExp('(@include\\()(.*?)\\)').exec(source)
  let filePath = result[2] // 获取需要插入的文件路径 需要把它处理成绝对路径
  const request = loaderUtils.urlToRequest(filePath)
  const url = await resolvePath(this, path.resolve(__dirname, 'src'), request)
  const res = await readFile(url, {encoding: "utf8"})
  return source.replace(result[0], res)
}
function readFile(url, options) {
  return new Promise((resolve, reject) => {
    fs.readFile(url, options, (err, data)=>{
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
      
    })
  })
}
function resolvePath(_this, fullPath, request) {
  return new Promise((resolve, reject) => {
    _this.resolve(fullPath, request, (err, url)=>{
      if (err) {
        reject(err)
      } else {
        resolve(url)
      }
    })
  })
}

demo地址：https://github.com/hellofriday/webpackloaderdemo/tree/demo2

参考：
https://juejin.cn/post/6844904176250519559
https://imweb.io/topic/5baca58079ddc80f36592f1a