手写一个webpack（loader、plugin）

手写webpack

源码和更多案例放在github上面，欢迎star

实现一个简单weboack可以分为4点

1. 编译一个入口文件(代码文件)
2. 解析并改造代码如将 import、require转换成 webpack_require
3. 收集依赖的模块并重复2
4. 生成文件并导出上面的模版。

扩展：

• 加上loader (文件转换)
• 加上plugin （编译过程中 不同周期 做额外的事，比如编译过程中加注释，加图片等等。。。）

搭建骨架

 class KWebpack {
  constructor(){
    // 读取webpack.config.js 且初始化
  }

  // 构建模块
  buildModules(){

  }

  // 生成打包文件
  writeFile(){

  }

  // 读取本地文件
  readFile(){
    
  }

  // 解析模块 将源代码解析成 ast语法树并处理
  parse(){

  }

  // 运行模块
  start(){

  }

}

初始化（编译一个入口文件）

let path = require('path')
let _config = require(path.resolve('webpack.config.js'))

// 初始化配置
let defaultConfig = {
  entry:'./src/main.js',
  output:{
    fileName:'build.js'
  }
}

class KWebpack {
  constructor(config){
    // 读取webpack.config.js 且初始化
    this.config = {...defaultConfig,...config}
    this.root = process.pwd()
    // 所有模块依赖
    this.modules = {}
    this.entry = this.config.entry
  }

构建

1.读取代码文件

  // 读取本地文件
  readFile(path){
    return fs.readFileSync(path,'utf-8')
  }

2.构建模块

  // 构建模块
  buildModules(modulePath){
    let fileContent = this.readFile(modulePath)
    // 获取解析过后的内容和依赖的模块
    let {resrouce,deps}= th