手写 loader(3) bannder-loader添加时间戳

banner-loader 可以在打包的代码前添加相关的注释信息

配置 banner-loader

利用 banner-loader 在打包的代码前添加时间戳

Javascript

// webpack.config.js
module.exports = {
  resolveLoader: {
    modules: ['node_modules', path.resolve('loaders')]
  },
  devtool: 'source-map',
  watch: true, // 开启实时监控打包
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'banner-loader',
          options:{
            text: '2020/02/',
            filename: path.resolve(__dirname,'banner.js') 
            // 优先解析filename表示的banner.js文件，没有再使用text字段
          }
        }
      }
    ]
  },
}

Javascript

// banner.js
new Date().toString()

实现 banner-loader

Javascript

// banner-loader.js
let loaderUtils = require('loader-utils')
let validateOptions = require('schema-utils')
// schema-utils用来检验使用loader时，传递的options格式是否正确
let fs = require('fs')

module.exports = function(source){
  let options = loaderUtils.getOptions(this)
  let cb = this.async()
  let schema = { // 检验规则
    type: 'object',
    properties:{
      text: {type: 'string'},
      filename: {type: 'string'}
    }
  }
  validateOptions(schema, options, 'banner-loader')
  // 用schema规则检验loader的optioins，如果报错，提示'banner-loader'
  if(options.filename){ // 优先解析banner.js
    this.addDependency(options.filename) 
    // 给banner-loader添加依赖，webpack同时设置watch:true
    // 监控banner.js更新就会重新打包
    fs.readFile(options.filename,'utf8',(err, data)=>{
      cb(err,`/*${eval(data)}*/${source}`)
      // 模板字符串，eval执行banner.js
    })
  }else{
    cb(null, `/*${options.text}*/${source}`)
  }
}