Node Interface

webpack은 Node.js 런타임에서 직접 사용할 수 있는 Node.js API를 제공합니다.

Node.js API는 모든 ë³´ê³  및 오류 처리가 수동으로 처리되어야 하므로, webpack이 컴파일 부분만 수행하고 빌드 또는 개발 프로세스는 사용자 정의하는 경우 유용합니다. 이러한 이유로 stats 설정 옵션은 webpack() 호출에 영향을 미치지 않습니다.

Installation

webpack Node.js API 사용을 시작하려면 먼저 webpack을 설치하세요.

npm install --save-dev webpack

그런 다음 Node.js 스크립트에 webpack 모듈을 요청합니다.

const webpack = require('webpack');

또는 ES2015를 선호하다면 아래처럼 사용하세요.

import webpack from 'webpack';

webpack()

가져온 webpack 함수는 webpack 설정 객체를 제공하며 콜백 함수가 제공되면 webpack 컴파일러를 실행합니다.

const webpack = require('webpack');

webpack({}, (err, stats) => {
  if (err || stats.hasErrors()) {
    // ...
  }
  // 프로세싱 완료
});

Compiler Instance

webpack 러너 함수에 콜백을 전달하지 않으면 webpack Compiler 인스턴스를 반환합니다. 이 인스턴스를 사용하여 webpack 러너를 수동으로 트리거 하거나, 빌드하고 변경 사항을 감시할 수 있습니다. CLI와 비슷합니다. Compiler 인스턴스는 다음 메소드를 제공합니다.

• .run(callback)
• .watch(watchOptions, handler)

특정 작업을 위임하기 위해 자식 컴파일러를 생성할 수 있지만, 일반적으로 마스터 Compiler 인스턴스는 하나만 생성됩니다. Compiler는 궁극적으로 라이프 사이클을 계속 실행하기 위해 최소한의 기능만을 수행하는 함수입니다. 이는 등록된 플러그인에 모든 로딩, 번들링 및 쓰기 작업을 위임합니다.

Compiler 인스턴스의 hooks 속성은 Compiler 라이프 사이클의 í›… 이벤트에 플러그인을 등록하는 데 사용됩니다. WebpackOptionsDefaulter 및 WebpackOptionsApply 유틸리티는 webpack에서 모든 내장 플러그인으로 Compiler 인스턴스를 설정하는 데 사용됩니다.

그런 다음 run 메소드를 사용하여 모든 컴파일 작업을 시작합니다. 완료되면 지정된 callback 함수가 실행됩니다. 최종 통계 및 오류 로깅은 이 callback 함수에서 수행되어야 합니다.

Run

Compiler 인스턴스에서 run 메소드를 호출하는 것은 위에서 언급한 빠른 실행 메소드와 매우 유사합니다.

const webpack = require('webpack');

const compiler = webpack({
  // ...
});

compiler.run((err, stats) => {
  // ...

  compiler.close((closeErr) => {
    // ...
  });
});

Watching

watch 메소드를 호출하면 webpack 러너를 트리거 하지만, 곧이어 변경 사항을 감시합니다 (webpack --watch CLI와 유사합니다). webpack이 변경사항을 감지하는 즉시 다시 실행합니다. Watching 인스턴스를 반환합니다.

watch(watchOptions, callback);

const webpack = require('webpack');

const compiler = webpack({
  // ...
});

const watching = compiler.watch(
  {
    // 예시
    aggregateTimeout: 300,
    poll: undefined,
  },
  (err, stats) => {
    // watch/build 결과를 여기에 출력...
    console.log(stats);
  }
);

Watching 옵션은 여기에 자세히 설명되어 있습니다.

Close Watching

watch 메소드는 .close(callback) 메소드를 노출하는 Watching 인스턴스를 반환합니다. 이 메소드를 호출하면 감시가 종료됩니다.

watching.close((closeErr) => {
  console.log('Watching Ended.');
});

Invalidate Watching

watching.invalidate를 사용하면 감시 프로세스를 중지하지 ì•Šê³  현재 컴파일 라운드를 수동으로 무효화할 수 있습니다.

watching.invalidate();

Stats Object

webpack() callback의 두 번째 인수로 전달되는 stats 객체는 코드 컴파일 프로세스에 대한 좋은 ì •ë³´ 소스입니다. 여기에는 다음이 포함됩니다.

• 오류 및 경고(있는 경우)
• 타이밍
• 모듈 및 청크 ì •ë³´

webpack CLI는 이 정보를 사용하여 보기 좋은 형식으로 사용자의 콘솔에 출력을 표시합니다.

이 stats 객체는 다음 메소드를 노출합니다.

stats.hasErrors()

컴파일하는 동안 오류가 있었는지 확인하는 데 사용할 수 있습니다. true 또는 false를 반환합니다.

stats.hasWarnings()

컴파일하는 동안 경고가 있었는지 확인하는 데 사용할 수 있습니다. true 또는 false를 반환합니다.

stats.toJson(options)

컴파일 정보를 JSON 객체로 반환합니다. options는 문자열(사전 설정) 또는 보다 세분화된 제어를 위한 객체일 수 있습니다.

stats.toJson('minimal');

stats.toJson({
  assets: false,
  hash: true,
});

사용 가능한 모든 옵션과 사전 설정은 통계 문서에 설명되어 있습니다.

다음은 이 함수의 출력 예시입니다.

stats.toString(options)

컴파일 정보의 형식화된 문자열을 반환합니다. (CLI 출력과 유사합니다.)

옵션은 stats.toJson(options)ê³¼ 동일하지만 í•œ 가지 추가 사항이 있습니다.

stats.toString({
  // 콘솔 색상 추가
  colors: true,
});

다음은 stats.toString() 사용법의 예시입니다.

const webpack = require('webpack');

webpack(
  {
    // ...
  },
  (err, stats) => {
    if (err) {
      console.error(err);
      return;
    }

    console.log(
      stats.toString({
        chunks: false, // 빌드를 훨씬 조용하게 만듭니다.
        colors: true, // 콘솔에 색상을 표시합니다.
      })
    );
  }
);

MultiCompiler

MultiCompiler 모듈을 사용하면 webpack이 별도의 컴파일러에서 복수의 설정을 실행할 수 있습니다. webpack NodeJS API에 있는 options 파라미터가 옵션의 배열일 경우, webpack은 별도의 컴파일러를 적용하고 모든 컴파일러가 실행된 후 callback을 호출합니다.

var webpack = require('webpack');

webpack(
  [
    { entry: './index1.js', output: { filename: 'bundle1.js' } },
    { entry: './index2.js', output: { filename: 'bundle2.js' } },
  ],
  (err, stats) => {
    process.stdout.write(stats.toString() + '\n');
  }
);

Error Handling

오류를 잘 처리하려면 다음 세 가지 유형의 오류를 고려해야 합니다.

• 치명적인 webpack 오류 (잘못된 구성 등)
• 컴파일 오류 (모듈 누락, 구문 오류 등)
• 컴파일 경고

다음은 이 모든 작업을 수행하는 예시입니다.

const webpack = require('webpack');

webpack(
  {
    // ...
  },
  (err, stats) => {
    if (err) {
      console.error(err.stack || err);
      if (err.details) {
        console.error(err.details);
      }
      return;
    }

    const info = stats.toJson();

    if (stats.hasErrors()) {
      console.error(info.errors);
    }

    if (stats.hasWarnings()) {
      console.warn(info.warnings);
    }

    // Log result...
  }
);

Custom File Systems

기본적으로 webpack은 파일을 읽고 디스크에 쓰는데 일반 파일 시스템을 사용합니다. 그러나 다른 종류의 파일시스템(메모리, webDAV 등)을 사용하여 ìž…ë ¥ 또는 출력 동작을 변경할 수 있습니다. 이를 위해 inputFileSystem 또는 outputFileSystem을 변경할 수 있습니다. 예를 들어 기본 outputFileSystem을 memfs으로 변경해서 디스크 대신 메모리에 파일을 쓸 수 있습니다.

const { createFsFromVolume, Volume } = require('memfs');
const webpack = require('webpack');

const fs = createFsFromVolume(new Volume());
const compiler = webpack({
  /* 옵션 */
});

compiler.outputFileSystem = fs;
compiler.run((err, stats) => {
  // 출력 나중에 읽기
  const content = fs.readFileSync('...');
  compiler.close((closeErr) => {
    // ...
  });
});

이것이 webpack-dev-server와 다른 여러 패키지에서 사용하는 webpack-dev-middleware가 파일을 신비하게 숨기면서도 브라우저까지 계속 제공하는 방법입니다!