webpack的一些手写

手写一个loader

//新建一个loader.js文件
//不能是箭头函数
module.exports = function (source) {
  return source.replace("dell", "hahahahhahha")
  //this.query接收参数
  //异步执行怎么处理
  //声明异步loader
  const callback = this.async()
  seTimeout(()=>{
      const result =  source.replace("dell", "hahahahhahha")
      callback(null,result)
  })
}
//使用

//loader路径查找
resolveLoader:{
    modules:['node_modules','./loaders']
}
module: {
    rules: [
        {
        test: /\.js$/,
        //方法一
        use: [path.resolve(__dirname, './loaders/loader.js')]
        //方法2
        use: ['./loaders/loader.js')]
        
        }
    ]
},

手写一个plugin

class CopyRightWebpackPlugin {
  // options接收一些参数
  constructor(options) {

  }
  apply(compiler) {
    //异步时刻tapAsync，同步tap
    compiler.hooks.emit.tapAsync('CopyRightWebpackPlugin', (compilertion, cb) => {
      compilertion.assets['CopyRight.txt'] = {
        source: function () {
          return 'this is my first plugins yeyeye'
        },
        size: function () {
          return 30
        }
      }
      // 记住回调
      cb()
    })
  }
}
module.exports = CopyRightWebpackPlugin

//使用
const CopyRightWebpackPlugin = require('./plugins/copyright-webpack-plugin')

new CopyRightWebpackPlugin({
      name: 'liuhuang'
    })

bundler源码编写