집 > 기사 > 웹 프론트엔드 > webpack에서 실행되는 진입 기능에 대한 자세한 해석

webpack에서 실행되는 진입 기능에 대한 자세한 해석

亚连원래의: 2018-06-15 14:35:462226검색

Webpack은 프런트엔드 리소스 로딩/패키징 도구입니다. 모듈 종속성을 기반으로 정적 분석을 수행한 다음 지정된 규칙에 따라 이러한 모듈에 해당하는 정적 리소스를 생성합니다. 이 글에서는 주로 webpack 소스 코드의 컴파일 과정, 즉 진입 기능을 소개합니다. Webpack은 현재 React와 Redux를 기반으로 개발된 애플리케이션의 주요 패키징 도구입니다. Angular 2나 다른 프레임워크를 사용하여 개발된 많은 애플리케이션도 Webpack을 사용하는 것 같습니다.

이 섹션의 프로세스는 그림과 같습니다.

이제 공식적으로 패키징 프로세스에 들어갑니다. 시작 방법이 실행됩니다.

Compiler.prototype.run = (callback) => {
  const startTime = Date.now();
  const onCompiled = (err, compilation) => { /**/ };
  this.applyPluginsAsync("before-run", this, err => {
    if (err) return callback(err);
    this.applyPluginsAsync("run", this, err => {
      if (err) return callback(err);
      this.readRecords(err => {
        if (err) return callback(err);
        this.compile(onCompiled);
      });
    });
  });
}

컴파일러 개체를 소개하는 것은 어떨까요? 생성자에 초기화 방법이 없기 때문에 그냥 평범한 변수 선언일 뿐이라 더 이상 이야기할 것이 없습니다.

　run 메소드에서는 before-run 이벤트 흐름을 실행하기 위해 tapable의 applyPluginsAsync가 먼저 호출됩니다. 이벤트 흐름은 다음과 같이 정의됩니다.

// NodeEnvironmentPlugin
compiler.plugin("before-run", (compiler, callback) => {
  if (compiler.inputFileSystem === inputFileSystem)
    inputFileSystem.purge();
  callback();
});

컴파일러 객체의 파일 시스템 메소드 마운팅 플러그인에서 before는 주입 - 이 이벤트 스트림 실행, 여기에서는 먼저 applyPluginsAsync를 살펴봅니다(웹팩 소스 코드에 맞게 약간 수정):

// tapable
Tapable.prototype.applyPluginsAsync = (name, ...args, callback) => {
  var plugins = this._plugins[name];
  if (!plugins || plugins.length === 0) return callback();
  var i = 0;
  var _this = this;
  // args为[args,next函数]
  args.push(copyProperties(callback, function next(err) {
    // 事件流出错或者全部执行完后调用回调函数
    if (err) return callback(err);
    i++;
    if (i >= plugins.length) {
      return callback();
    }
    // 执行下一个事件
    plugins[i].apply(_this, args);
  }));
  // 执行第一个事件
  plugins[0].apply(this, args);
};

그 당시 섹션에서 이 시리즈의 이벤트 스트림 트리거 방법에 대해 이야기하지 않았습니다. 8이므로 간략한 소개는 다음과 같습니다.

1, copyProperties는 Object.sign과 유사하게 객체 속성을 복사하는 데 사용됩니다. 그러나 여기에는 전혀 쓸모가 없는 두 가지 함수가 전달됩니다. ! ! ! ! (여기서 객체 복사 방법이 무엇인지 항상 고민했기 때문에 당시에는 설명을 작성하지 않았습니다.)

2 webpack에서 args는 컴파일러의 컨텍스트를 가리키는 this입니다

3. 이벤트 스트림에 주입되는 이벤트는 반드시 콜백 메서드가 실행될 때(위의 예와 같이) 이때 실행되는 것은 외부 콜백이 아니라 다음 함수입니다

4. 콜백이 실행되거나 중간에 오류가 발생하거나 모든 이벤트 흐름이 실행되었습니다

　이것은 매우 명확합니다. 이제 before-run에 주입된 함수 매개변수의 의미는 다음과 같습니다.

// before-run
// compiler => this
// callback => next
(compiler, callback) => {
  if (compiler.inputFileSystem === inputFileSystem)
    inputFileSystem.purge();
  callback();
}

이벤트가 하나뿐이므로 before-run에서는 내부 콜백의 next 메소드를 호출한 후 i가 이벤트 길이보다 크기 때문에 외부 콜백이 직접 호출됩니다.

　여기서 제거 방법은 이전에 본 적이 있으며 내용에 대한 리뷰는 다음과 같습니다.

// NodeEnvironmentPlugin
compiler.inputFileSystem = new CachedInputFileSystem(new NodeJsInputFileSystem(), 60000);
// CachedInputFileSystem
CachedInputFileSystem.prototype.purge = function(what) {
  this._statStorage.purge(what);
  this._readdirStorage.purge(what);
  this._readFileStorage.purge(what);
  this._readlinkStorage.purge(what);
  this._readJsonStorage.purge(what);
};
// CachedInputFileSystem => Storage
Storage.prototype.purge = function(what) {
  if (!what) {
    this.count = 0;
    clearInterval(this.interval);
    this.nextTick = null;
    this.data.clear();
    this.levels.forEach(function(level) {
      level.clear();
    });
  } else if (typeof what === "string") { /**/ } else { /**/ }
};

　한 문장으로 말하면 패키지에 있는 모든 캐시된 데이터를 지웁니다.

처음이라고 가정하기 때문에 여기서는 실제 작업이 없습니다. 그러면 외부 콜백이 호출되고 동일한 방식으로 실행 이벤트 스트림이 트리거됩니다.

　 CachePlugin 플러그인에서 제공되는 실행 이벤트 스트림에 대한 메서드는 단 하나뿐입니다.

Compiler.plugin("run", (compiler, callback) => {
  // 这个属性我暂时也不知道是啥 反正直接callback了
  if (!compiler._lastCompilationFileDependencies) return callback();
  const fs = compiler.inputFileSystem;
  const fileTs = compiler.fileTimestamps = {};
  asyncLib.forEach(compiler._lastCompilationFileDependencies, (file, callback) => {
    // ...
  }, err => {
    // ...
  });
});

실행 이벤트 스트림이 처음으로 트리거되면 속성이 정의되지 않으므로 직접 건너뛰기 때문입니다. 소스코드를 읽으면서 파싱을 하고 있어서 저도 뭔지 모르겠네요, 하하.

다음 콜백은 다음과 같습니다.

this.readRecords(err => {
  if (err) return callback(err);
  this.compile(onCompiled);
});

이것은 또 다른 프로토타입 메소드이며, 소스 코드는 다음과 같습니다.

Compiler.prototype.readRecords = (callback) => {
  // 这个属性也没有
  if (!this.recordsInputPath) {
    this.records = {};
    return callback();
  }
  this.inputFileSystem.stat(this.recordsInputPath, err => {
    // ...
  });
}

여기서도 처음에는 스킵하고 콜백을 직접 소스코드로 보면 될 것 같습니다. 경로를 읽고 파일 정보를 레코드에 캐시합니다.

　이제 두 단계 연속 점프하여 프로토타입 메소드 컴파일을 직접 입력하고 이 기능을 미리 봅니다.

Compiler.prototype.compile = (callback) => {
  const params = this.newCompilationParams();
  // 依次触发事件流
  this.applyPluginsAsync("before-compile", params, err => {
    if (err) return callback(err);
    this.applyPlugins("compile", params);
    const compilation = this.newCompilation(params);
    this.applyPluginsParallel("make", compilation, err => {
      if (err) return callback(err);
      compilation.finish();
      compilation.seal(err => {
        if (err) return callback(err);
        this.applyPluginsAsync("after-compile", compilation, err => {
          if (err) return callback(err);
          return callback(null, compilation);
        });
      });
    });
  });
}

　컴파일 및 패키징의 핵심 프로세스가 명확하게 확인되었으며 컴파일 전, 컴파일, 만들기 및 이후- 컴파일 이벤트가 스트림에서 트리거되고 마지막으로 콜백 함수가 호출됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

webpack에서 실행되는 진입 기능에 대한 자세한 해석

관련 기사