前端推薦！玩轉(zhuǎn)Webpack共需幾步？

const { Synchook, AsyncParallelHook } = require('tapable')
class Car {  constructor() {    this.hooks = {      // 創(chuàng)建新的鉤子      accelerate: new Synchook(['newSpeed']),      brake: new SynHook(),      calcRoutes: new AsyncParallelHook(['source', 'target', 'routeList'])    }  }}

const car = new Car();
// 為brake鉤子增加訂閱者，通常為插件，第一個參數(shù)為插件名稱，第二個參數(shù)為回調(diào)函數(shù)。car.hooks.brake.tap('WarningLampPlugin', () => warningLamp.on())// 為accelerate鉤子增加訂閱者car.hooks.accelerate.tap('LoggerPlugin', (newSpeed) => console.log(`現(xiàn)在車速為：${newSpeed}`))

// 使用tapPromise添加插件car.hooks.calcRoutes.tapPromise('GoogleMapsPlugin', (source, target, routesList) => {  // 返回一個Promise  return google.maps.findRoute(source, target).then(route => {    routesList.add(route);  });})
// 也可通過tapAsync添加插件，與tapPromise的不同之處是回調(diào)放在了最后一個參數(shù)car.hooks.calcRoutes.tapAsync('', (source, target, routesList, callback) => {  bing.findRoute(source, target, (err, route) => {    if (err) return callback(err)    routesList.add(route);    // 調(diào)用callback    callback();  })})
// 異步鉤子也可以添加同步插件car.hooks.calcRoutes.tap("CachedRoutesPlugin", (source, target, routesList) => {  const cachedRoute = cache.get(source, target);  if(cachedRoute)    routesList.add(cachedRoute);})

class Car {  // ...  setSpeed(speed) {    // 觸發(fā)同步鉤子    this.hooks.accelerate.call(speed)  }
  useNavSystemPromise(source, target) {    const routeList = new List();    // promise的方式觸發(fā)異步鉤子，對應tapPromise    return this.hooks.calcRoutes.promise(source, target, routeList).then(res => {      return routesList.getRoutes();    })  }
  useNavSystemAsync(source, target) {    const routesList = new List();    // callAsync的方式觸發(fā)異步鉤子，對應tapAsync    this.hooks.calcRoutes.callAsync(source, target, routesList, err => {      if(err) return callback(err);      callback(null, routesList.getRoutes());    });  }}

car.hooks.calcRoutes.intercept({  call: (source, target, routesList) => {    console.log("Starting to calculate routes");  },  register: (tapInfo) => {    console.log(`${tapInfo.name} is doing its job`);    return tapInfo;   }})

class SyncHookCodeFactory extends HookCodeFactory {  // ...}const factory = new SyncHookCodeFactory();
const COMPILE = function(options) {  factory.setup(this, options);  return factory.create(options);}function SyncHook() {  // ...  hook.compile = COMPILE}

class HookCodeFactory {  // ...  create(options) {    switch (options.type) {      case "sync":        fn = new Function(          this.args(),          '"use strict";\n' +          this.header() +          this.contentWithInterceptors({            onError: err => `throw ${err};\n`,            onResult: result => `return ${result};\n`,            resultReturns: true,            onDone: () => "",            rethrowIfPossible: true          })        );      break;      // ...    }  }}

class WebpackCLI {  async run() {    // 加載webpack，可以理解為require('webpack')    this.webpack = await this.loadWebpack()    const options = [].concat(/* shell配置和配置文件 */)    this.runWebpack(options)  }
  async runWebpack(options) {    const callback = () => {/* 錯誤處理等回調(diào) */}    await this.createCompiler(options, callback);  }    await createCompiler(options, callback) {    this.webpack(      options,      callback    )  }}
const runCLI = (args) => {  const cli = new WebpackCLI()  cli.run(args)}
runCLI(process.argv);

function webpack = (options, callback) => {  const create = () => {    const compiler = createCompiler(options)    return { compiler }  }  // ...  if (callback) {    const { compiler } = create()    compiler.run(() => {})  }}

function createCompiler(rawOptions) {  const options = getNormalizedWwebpackOptions(rawOptions)  const compiler = new Compiler(options.context, options)  if (Array.isArray(options.plugins)) {    for (const plugin of options.plugins) {      if (typeof plugin === "function") {        plugin.call(compiler, compiler);      } else {        plugin.apply(compiler);      }    }  }
  compiler.hooks.environment.call();  compiler.hooks.afterEnvironment.call();  new WebpackOptionsApply().process(options, compiler);  compiler.hooks.initialize.call();  return compiler}

class Compiler {  constructor() {    this.hooks = Object.freeze({      initialize: new SyncHook([]),      shouldEmit: new SyncBailHook(['compilation']),      // 其他一系列鉤子的定義    })  }}

class WebpackOptionsApply {  process(options, compiler) {    // 執(zhí)行plugins    // new SomePlugin().apply()        new EntryOptionPlugin().apply(compiler);    compiler.hooks.entryOption.call(options.context, options.entry);    //...  }}

class EntryOptionPlugin {  apply(compiler) {    compiler.hooks.entryOption.tap('EntryOptionPlugin', (context, entry) => {      EntryOptionPlugin.applyEntryOption(compiler, context, entry);      return true;    })  }
  static applyEntryOption(compiler, context, entry) {    const EntryPlugin = require("./EntryPlugin");    for (const name of Object.keys(entry)) {      const desc = entry[name];      // 整理entry的options，使之返回統(tǒng)一的格式      const options = EntryOptionPlugin.entryDescriptionToOptions(        compiler,        name,        desc      );      for (const entry of desc.import) {        new EntryPlugin(context, entry, options).apply(compiler);      }    }  }}

class EntryPlugin {  apply(compiler) {    compiler.hooks.compilation.tap('EntryPlugin',       (compilation, { normalModuleFactory }) => {        compilation.dependencyFactories.set(          EntryDependency,          normalModuleFactory        );      })
    const { entry, options, context } = this;    const dep = EntryPlugin.createDependency(entry, options);
    compiler.hooks.make.tapAsync("EntryPlugin", (compilation, callback) => {      compilation.addEntry(context, dep, options, err => {        callback(err);      });    });  }}

class Compiler {  run (callback) {    const onCompiled = (err, compilation) => {      this.hooks.shouldEmit.call(compilation)      this.hooks.done.callAsync(() => {})      this.emitAssets(compilation, () => {        this.emitRecords(() => {})      })    }    this.hooks.beforeRun.callAsync(() => {      this.hooks.run.callAsync(() => {        this.compile(onCompiled)      })    })  }  compile(callback) {    const params = this.newCompilationParams();    this.hooks.beforeCompile.callAsync(params, () => {      this.hooks.compile.call(params);      const compilation = this.newCompilation(params);
      this.hooks.make.callAsync(compilation, () => {        this.hooks.finishMake.callAsync(compilation, () => {          compilation.finish(() => {            compilation.seal(() => {              this.hooks.afterCompile.callAsync((err) => {                if (err) return callback(err)                return callback(err, compilation)              })            })          })        })      })    })  }  emitRecords(callback) {    this.outputFileSystem.writeFile();  }}

const { Parser: parser } = require("acorn");
class JavascriptParser extends Parse {  parse(source) {    // ...    const ast = parser.parse(source)  }}

class Compilation {  seal(callback) {   const chunkGraph = new ChunkGraph()   this.addChunk();   buildChunkGraph();   this.hooks.optimizeModules.call()   this.hooks.afterOptimizeModules.call()   this.hooks.optimizeChunks.call()   this.hooks.afterOptimizeChunks.call()   this.hooks.optimizeTree.call()   // ...   this.createModuleAssets();   this.createChunkAssets();  }
  createChunkAssets() {    this.emitAsset()    // ...  }  createModuleAssets() {    this.emitAsset()  }}

const fs = require('fs');const parser = require('@babel/parser')const traverse = require('@babel/traverse').defaultconst { transformFromAst } = require('babel-core')
module.exports = {  getAST: path => {    const source = fs.readFileSync(path, 'utf-8')    return parser.parse(source, {      sourceType: 'module'    })  },  getDependencies: ast => {    const depencies = []    traverse(ast, {      ImportDeclaration: ({node}) => {        depencies.push(node.source.value)      }    })    return depencies;  },  transform: ast => {    const { code } = transformFromAst(ast, null, {      presets: ['env']    })    return code;  }}

const path = require('path');const fs = require('fs')const { getAST, getDependencies, transform } = require('./parser')
class Compiler {  constructor(options) {    const { entry, output } = options    this.entry = entry;    this.output = output    this.modules = [];  } 
  run () {    const entryModule = this.buildModule(this.entry, true);    this.modules.push(entryModule);    this.walk(entryModule);    // console.log('modules', this.modules)    this.emitFiles();  }
  walk(module) {    const moduleNameMap = this.modules.map(item => item.filename)    module.dependencies.map(dep => {      if (!moduleNameMap.includes(dep)) {        const newModule = this.buildModule(dep)        this.modules.push(newModule);        this.walk(newModule)      }    })  }
  buildModule(filename, isEntry) {    let ast;    if (isEntry) {      ast = getAST(filename)    } else {      const absolutePath = path.resolve(process.cwd(), './webpack/demo', filename)      ast = getAST(absolutePath)    }    return {      filename,      dependencies: getDependencies(ast),      transformCode: transform(ast)    }  }
  emitFiles() {    const outputPath = path.join(this.output.path, this.output.filename)    let modules = ''    this.modules.map(_module => {      modules += `'${_module.filename}': function(require, module, exports) {${_module.transformCode}},`    })
    const bundle = `      (function(modules) {        function require(filename) {          const fn = modules[filename];          const module = { exports: {} };          fn(require, module, module.exports);          return module.exports;        }        require('${this.entry}')      })({${modules}})    `
    fs.writeFileSync(outputPath, bundle, 'utf-8')  }}

// a.jsexport const a = 1;
// b.jsimport { a } from './a.js'export const b  = a + 1;
// index.jsimport { b } from './b.js'console.log(b + 1)

// main.jsconst Compiler = require('./compiler')const config = {  entry: path.join(__dirname, './index.js'),  output: {    path: path.join(__dirname, '../dist'),    filename: 'bundle.js'  }}
function main(options) {  new Compiler(options).run();}
main(config)