Configuration

기본적으로 webpack은 설정 파일을 사용할 필요가 없습니다. webpack은 프로젝트의 엔트리 포인트를 src/index.js으로 가정하고, 프로덕션을 위해 압축하고 최적화된 결과를 dist/main.js로 내보냅니다.

보통 프로젝트는 이 기능을 확장해야 합니다. 루트 폴더에 webpack.config.js 파일을 생성하면 webpack이 자동으로 이 파일을 사용합니다.

사용 가능한 모든 설정 옵션을 아래에서 설명하고 있습니다.

Use a different configuration file

특정 상황에 따라 다른 설정 파일을 사용하려면 커맨드라인에서 --config 플래그를 사용하여 이를 변경할 수 있습니다.

package.json

"scripts": {
  "build": "webpack --config prod.config.js"
}

Set up a new webpack project

Webpack은 매우 다양한 옵션을 제공하기 때문에 사용하기 어려울 수 있습니다. 따라서 버전 6.0.0부터 제공되는 새로운 도구인 webpack-cli의 create-webpack-app을 활용해 보세요. 이 도구를 사용하면 프로젝트 요구 사항에 맞는 특정 설정 파일을 사용하여 webpack 애플리케이션을 신속하게 생성할 수 있습니다. 설정 파일을 생성하기 전에 몇 가지 질문을 받게 됩니다.

npx create-webpack-app [command] [options]

npx는 프로젝트 또는 전역적으로 create-webpack-app이 설치되어 있지 않은 경우 설치를 요청할 수 있습니다. 또한 새 웹팩 애플리케이션 생성 과정에서 선택한 사항에 따라 추가 패키지가 프로젝트에 설치될 수도 있습니다.

$ npx create-webpack-app init

Need to install the following packages:
create-webpack-app@2.0.0
Ok to proceed? (y)

? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? CSS only
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Only for Production
? Which package manager do you want to use? npm
[create-webpack] ℹ️ Initializing a new Webpack project
...
...
...
[create-webpack] ✅ Project dependencies installed successfully!
[create-webpack] ✅ Project has been initialised with webpack!

Configuration Languages

Webpack은 여러 프로그래밍 및 데이터 언어로 작성된 설정 파일을 허용하므로, 프로젝트에 적합한 형식(JavaScript, TypeScript, CoffeeScript 또는 JSON5, YAML, TOML과 같은 일반 데이터 파일)으로 설정을 작성할 수 있습니다.

defineConfig

defineConfig는 webpack에서 내보내는 헬퍼로, 추가적인 타입 어노테이션 없이 편집기에서 설정에 대한 타입 체킹 및 자동 완성을 제공합니다. 이는 항등 함수(런타임에 전달된 설정을 단순히 반환하는 no-op)이므로 순수 JavaScript 설정에서도 작동합니다.

webpack.config.js

const { defineConfig } = require("webpack");

module.exports = defineConfig({
  mode: "none",
});

webpack-cli가 로드할 수 있는 모든 형태를 허용합니다: 단일 설정 객체, 설정 배열(멀티 컴파일러), 이들 중 하나를 반환하는 함수, 그러한 함수들의 배열, 또는 이들 중 하나를 해석하는 Promise.

const { defineConfig } = require("webpack");

module.exports = defineConfig((env, argv) => ({
  mode: argv.mode ?? "development",
  // ...
}));

TypeScript

TypeScript에서 webpack 설정을 하기 위해서는, 먼저 필요한 디펜던시, 예를들면 TypeScript와 DefinitelyTyped에서 관련있는 타입 정의를 설치해야 합니다.

npm install --save-dev typescript ts-node @types/node
# webpack-dev-server < v4.7.0을 사용하는 경우
npm install --save-dev @types/webpack-dev-server

설치를 마쳤으면, 다음 설정을 작성하세요.

webpack.config.ts

import path from "node:path";
import { fileURLToPath } from "node:url";

import webpack from "webpack";
// `devServer`를 설정할 때 typescript 오류가 발생하는 경우를 대비하여
import "webpack-dev-server";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const config: webpack.Configuration = {
  mode: "production",
  entry: "./foo.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "foo.bundle.js",
  },
};

export default config;

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",

    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,

    // `import ... from './file.ts';` 작성을 허용합니다
    "rewriteRelativeImportExtensions": true
  }
}

위 예시는 TypeScript 2.7 이상 버전의 tsconfig.json 파일에서 새로운 esModuleInterop 및 allowSyntheticDefaultImports 컴파일러 옵션과 함께 사용된다고 가정합니다.

CommonJS 및 ESM 형식의 설정을 모두 지원합니다.

Node.js는 v22.18.0부터 내장된 타입 제거 기능을 지원하므로, 아래 설명된 추가 설정은 이전 버전에서만 필요합니다.

열거형 선언과 같이 JavaScript 코드 생성이 필요한 지울 수 없는 TypeScript 구문의 변환을 활성화하려면 매개변수 속성에 --experimental-transform-types 플래그를 사용하십시오.

typescript 형식을 지원하지 않는 이전 버전의 Node.js를 사용 중이거나 tsconfig.json의 compilerOptions에서 module을 commonjs로 설정하려는 경우, 이 문제를 해결할 수 있는 네 가지 방법이 있습니다.

• tsconfig.json을 수정합니다.
• tsconfig.json을 수정하고 ts-node를 위한 설정을 추가합니다.
• 설정 파일의 모듈 타입을 ts-node에 알립니다.
• ts-node가 별도의 TypeScript 설정을 참조하도록 합니다.

첫 번째 방법은 tsconfig.json 파일을 열고 compilerOptions를 찾는것입니다. target을 "ES5"로 하고 module을 "CommonJS"로 설정합니다.(또는 module 옵션을 완전히 제거합니다)

tsc에 대해 "module": "ESNext"를 유지할 수 있으며, webpack 또는 다른 빌드 도구를 사용하는 경우 ts-node에 대한 오버라이드를 설정합니다. ts-node 설정

{
  "compilerOptions": {
    "module": "ESNext"
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

세 번째 방법은 moduleTypes로, 설정 파일 하나의 모듈 타입만 오버라이드합니다. 이것은 두 가지 오버라이드 중에서 일반적으로 더 나은 방법입니다. compilerOptions.module과 달리 Node.js에도 해당 파일을 CommonJS로 로드하도록 알려주므로, Node.js가 ES 모듈을 require()하도록 요청받을 때 발생하는 오류를 방지합니다.

{
  "compilerOptions": {
    "module": "ESNext"
  },
  "ts-node": {
    "moduleTypes": {
      "webpack.config.ts": "cjs"
    }
  }
}

네 번째 방법은 webpack 설정을 위한 별도의 TypeScript 설정을 만드는 것입니다.

tsconfig-for-webpack-config.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}

그런 다음 환경 변수 TS_NODE_PROJECT를 다음과 같이 설정합니다.

package.json

{
  "scripts": {
    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
  }
}

CoffeeScript

마찬가지로, CoffeeScript를 사용하려면 먼저 필요한 디펜던시를 설치해야 합니다.

npm install --save-dev coffeescript

그리고 다음 설정을 작성하세요.

webpack.config.coffee

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import webpack from 'webpack'

__filename = fileURLToPath(import.meta.url)
__dirname = path.dirname(__filename)

config =
  mode: 'production'
  entry: './src/index.html'
  experiments:
    html: true
  output:
    path: path.resolve(__dirname, 'dist')
    filename: 'my-first-webpack.bundle.js'
  module:
    rules: [
      {
        test: /\.(js|jsx)$/
        use: 'babel-loader'
      }
    ]
  plugins: [
    new webpack.ProgressPlugin()
  ]

export default config

Babel and JSX

아래 예제에서 JSX (React JavaScript Markup) 및 Babel은 webpack이 이해할 수 있는 JSON 설정을 만드는 데 사용됩니다.

Jason Miller 제공

먼저, 필요한 디펜던시를 설치하세요.

npm install --save-dev babel-register jsxobj babel-preset-es2015

.babelrc

{
  "presets": ["es2015"]
}

webpack.config.babel.js

import jsxobj from "jsxobj";

// import된 plugin의 예시
const CustomPlugin = (config) => ({
  ...config,
  name: "custom-plugin",
});

export default (
  <webpack target="web" watch mode="production">
    <entry path="src/index.js" />
    <resolve>
      <alias
        {...{
          react: "preact-compat",
          "react-dom": "preact-compat",
        }}
      />
    </resolve>
    <plugins>
      <CustomPlugin foo="bar" />
    </plugins>
  </webpack>
);

데이터 포맷 (JSON5, YAML 및 TOML)

설정이 순수한 정적 데이터(함수, process.env 읽기, 계산된 값이 없음)인 경우 JavaScript 대신 데이터 파일로 작성할 수 있습니다. webpack-cli는 다음 확장자를 직접 파싱합니다:

파서는 webpack-cli와 번들되지 않습니다 — 사용하는 형식에 필요한 파서를 개발 의존성으로 설치하세요. 누락된 경우 webpack-cli가 중지되고 설치해야 할 정확한 패키지를 알려줍니다.

npm install --save-dev json5
# or
npm install --save-dev js-yaml
# or
npm install --save-dev toml

파일을 --config로 지정하거나, 기본 설정으로 선택되도록 이름을 지정하세요(예: webpack.config.json5):

npx webpack --config webpack.config.toml

webpack.config.json5

{
  // JSON5는 주석, 따옴표 없는 키 및 후행 쉼표를 허용합니다
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
  },
}

webpack.config.yaml

mode: production
entry: ./src/index.js
output:
  filename: bundle.js

webpack.config.toml

mode = "production"
entry = "./src/index.js"

[output]
filename = "bundle.js"

Configuration Types

단일 설정 객체를 export 하는 것 외에도 다른 요구 사항을 처리하는 몇 가지 방법이 더 있습니다.

Exporting a Function

webpack.config.js에서 개발환경과 프로덕션 환경을 명확히 해야 합니다. 이를 수행하는 방법에는 여러 가지가 있습니다. 한 가지 옵션은 객체를 내보내는 대신 webpack 설정에서 함수를 내보내는 것입니다. 이 함수는 두 개의 인수로 호출됩니다.

• 첫 번째 파라미터는 environment입니다. 구문 예제는 CLI 문서의 environment 옵션을 참고하세요.
• 두 번째 파라미터인 argv는 옵션 map 입니다. output-path, mode와 같은 키를 사용하여 webpack에 전달되는 옵션을 나타냅니다.

-export default {
+export default function(env, argv) {
+  return {
+    mode: env.production ? 'production' : 'development',
+    devtool: env.production ? 'source-map' : 'eval',
     plugins: [
       new MinimizerPlugin({
         minimizerOptions: {
+          compress: argv.mode === 'production' // `--mode production`이 통과 된 경우에만
         }
       })
     ]
+  };
};

Exporting a Promise

Webpack은 설정 파일에서 export 한 함수를 실행하고 Promise가 반환될 때까지 기다립니다. 설정에서 사용되는 변수를 비동기적으로 로드해야 할 때 편리합니다.

export default () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: "./app.js",
        /* ... */
      });
    }, 5000);
  });

Exporting multiple configurations

단일 설정 객체 또는 함수를 export 하는 대신, 여러 개의 설정을 export 할 수 있습니다(여러 개의 함수는 webpack 3.1.0부터 지원). webpack을 실행할 때, 모든 설정이 빌드됩니다. 예를 들어, AMD나 CommonJS 같은 여러 개의 target을 위한 라이브러리 빌드 시 유용합니다.

export default [
  {
    output: {
      filename: "./dist-amd.js",
      libraryTarget: "amd",
    },
    name: "amd",
    entry: "./app.js",
    mode: "production",
  },
  {
    output: {
      filename: "./dist-commonjs.js",
      libraryTarget: "commonjs",
    },
    name: "commonjs",
    entry: "./app.js",
    mode: "production",
  },
];

dependencies

다른 설정의 출력에 의존하는 설정이 있는 경우 dependencies 배열을 사용하여 의존성 목록을 지정할 수 있습니다.

webpack.config.js

export default [
  {
    name: "client",
    target: "web",
    // …
  },
  {
    name: "server",
    target: "node",
    dependencies: ["client"],
  },
];

parallelism

여러 설정을 export하는 경우 설정 배열과 parallelism 옵션을 사용하여 병렬로 컴파일 할 최대 컴파일러 수를 지정할 수 있습니다.

• 타입: number
• 지원 버전: 5.22.0+

webpack.config.js

const config = [
  {
    // config-1 설정
  },
  {
    // config-2 설정
  },
];

config.parallelism = 1;

export default config;

Entry and Context

엔트리 객체는 webpack이 번들 빌드를 시작하는 곳입니다. 컨텍스트는 엔트리 파일을 포함하는 디렉터리에 대한 절대 경로입니다.

context

string

설정에서 엔트리 포인트와 로더를 확인하기 위한 절대 경로의 기본 디렉터리.

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  context: path.resolve(__dirname, "app"),
};

기본적으로 Node.js의 현재 작업 디렉터리가 사용되지만, 설정에 값을 전달하는 것이 좋습니다. 이렇게 하면 CWD(현재 작업 디렉터리)와 독립적인 설정이 가능합니다.

entry

string string[] EntryObject EntryFn

type Entry = string | string[] | EntryObject | EntryFn;

// Each key names a chunk; see Entry descriptor below for EntryDescription.
type EntryObject = Record<string, string | string[] | EntryDescription>;

type EntryFn = () =>
  | string
  | string[]
  | EntryObject
  | Promise<string | string[] | EntryObject>;

애플리케이션 번들 처리를 시작할 지점입니다. 배열이 전달되면 배열의 모든 항목이 처리됩니다.

동적으로 로드된 모듈은 엔트리 포인트가 아닙니다.

간단한 규칙: HTML 페이지 당 하나의 엔트리 포인트. SPA: 하나의 엔트리 포인트, MPA: 다중 엔트리 포인트.

export default {
  // ...
  entry: {
    home: "./home.js",
    about: "./about.js",
    contact: "./contact.js",
  },
};

Naming

문자열 또는 문자열 배열이 전달되면, 청크 이름은 main입니다. 객체가 전달되면, 객체의 키는 청크의 이름이 되고, 객체의 값은 청크의 엔트리 포인트를 설명합니다.

Entry descriptor

객체가 전달되면 객체의 값은 문자열, 문자열 배열 또는 디스크립터가 될 수 있습니다.

export default {
  // ...
  entry: {
    home: "./home.js",
    shared: ["react", "react-dom", "redux", "react-redux"],
    catalog: {
      import: "./catalog.js",
      filename: "pages/catalog.js",
      dependOn: "shared",
      chunkLoading: false, // 요청 시 로드되는 청크를 비활성화하고 모든 것을 기본 청크에 넣습니다.
    },
    personal: {
      import: "./personal.js",
      filename: "pages/personal.js",
      dependOn: "shared",
      chunkLoading: "jsonp",
      asyncChunks: true, // 요청 시 로드되는 비동기 청크 생성
      layer: "name of layer", // 엔트리 포인트에 대한 레이어 설정
      worker: true, // worker 엔트리로 표시, webpack 5.108.0부터 사용 가능
    },
  },
};

디스크립터를 사용하여 추가 옵션을 엔트리 포인트에 전달할 수 있습니다.

html 옵션 5.108.0+은 이 엔트리 포인트의 JS와 CSS 출력 청크가 주입된 HTML 파일을 생성합니다. output.html과 같은 값을 받으며, webpack 5.110.0부터는 이 엔트리의 설정을 옵션별로 재정의하는 객체도 받습니다. 따라서 특정 엔트리만 페이지 생성을 제외하거나 title만 변경할 수 있습니다.

export default {
  entry: {
    app: "./src/app.js",
    admin: { import: "./src/admin.js", html: { title: "Admin" } },
    worker: { import: "./src/worker.js", html: false },
  },
  output: { html: true },
  experiments: { html: true },
};

Output filename

기본적으로, 엔트리 청크의 출력 파일 이름은 output.filename에서 추출되지만, 특정 엔트리에 대한 커스텀 출력 파일 이름을 지정할 수 있습니다.

export default {
  // ...
  entry: {
    app: "./app.js",
    home: { import: "./contact.js", filename: "pages/[name].js" },
    about: { import: "./about.js", filename: "pages/[name].js" },
  },
};

여기의 디스크립터는 특정 엔트리 포인트에 filename 옵션을 전달하는 데 사용되었습니다.

Dependencies

기본적으로, 모든 엔트리 청크는 사용하는 모든 모듈을 저장합니다. dependOn 옵션을 사용하면 한 엔트리 청크에서 다른 엔트리 청크로 모듈을 공유할 수 있습니다.

export default {
  // ...
  entry: {
    app: { import: "./app.js", dependOn: "react-vendors" },
    "react-vendors": ["react", "react-dom", "prop-types"],
  },
};

app 청크에는 react-vendors에 있는 모듈이 포함되지 않습니다.

dependOn 옵션은 문자열 배열을 허용합니다.

export default {
  // ...
  entry: {
    moment: { import: "moment-mini", runtime: "runtime" },
    reactvendors: { import: ["react", "react-dom"], runtime: "runtime" },
    testapp: {
      import: "./wwwroot/component/TestApp.tsx",
      dependOn: ["reactvendors", "moment"],
    },
  },
};

또한, 배열을 사용해서 하나의 엔트리에 여러 개의 파일을 지정할 수 있습니다.

export default {
  // ...
  entry: {
    app: { import: ["./app.js", "./app2.js"], dependOn: "react-vendors" },
    "react-vendors": ["react", "react-dom", "prop-types"],
  },
};

Polyfills in an entry

The array form is also how polyfills are loaded, because the order of an entry array is the order the files run in. Anything a polyfill repairs has to be repaired before the application touches it, so the polyfill goes first:

export default {
  // ...
  entry: {
    main: ["core-js/stable", "./src/index.js"],
  },
};

See Loading Polyfills for when a separate polyfill entry is worth the extra request, and Serving a smaller polyfill to modern browsers for building the same source twice so modern browsers download less.

Dynamic entry

함수가 전달되면 모든 make 이벤트에서 호출됩니다.

make 이벤트는 webpack이 시작될 때와 파일 변경을 감시 할 때 모든 유효하지 않은 상황에서 호출됩니다.

export default {
  // ...
  entry: () => "./demo",
};

또는

export default {
  // ...
  entry: () =>
    new Promise((resolve) => {
      resolve(["./demo", "./demo2"]);
    }),
};

Multiple Entry Points in Different Folders

경우에 따라서는 구조화 및 유지 관리 용이성을 위해 진입점을 여러 폴더로 분류하는 것이 좋을 수 있습니다. 다음은 여러 폴더에 위치한 여러 진입점을 정의하는 방법입니다.

export default {
  entry: {
    "/scriptFolder/one/app": "./src/one/app.js",
    "/scriptFolder/two/main": "./src/two/main.js",
  },
};

예: 외부 소스(원격 서버, 파일 시스템 콘텐츠 또는 데이터베이스)에서 실제 엔트리를 가져오기 위해 동적 엔트리를 사용할 수 있습니다.

webpack.config.js

export default {
  entry() {
    return fetchPathsFromSomeExternalSource(); // ['src/main-layout.js', 'src/admin-layout.js']와 같이 해석할 promise를 반환합니다.
  },
};

output.library 옵션과 결합하는 경우, 배열이 전달되면 마지막 항목만 내보냅니다.

Runtime chunk

Webpack 'v5.43.0' 이후 새로운 런타임 청크를 방지하기 위해 엔트리포인트에 대한 런타임 청크를 설정하고 이를 'false'로 설정할 수 있습니다.

optimization.runtimeChunk를 사용하면 지정되지 않은 엔트리포인트에 대해 전역적으로 설정할 수 있습니다.

export default {
  // ...
  entry: {
    home: {
      import: "./home.js",
      runtime: "home-runtime",
    },
    about: {
      import: "./about.js",
      runtime: false,
    },
  },
};

Mode

mode 옵션을 사용하면 webpack에 내장된 최적화 기능을 사용할 수 있습니다.

'none' | 'development' | 'production' = 'production'

Usage

설정에서 mode 옵션을 사용합니다.

export default {
  mode: "development",
};

혹은 CLI의 인수로 전달합니다.

webpack --mode=development

지원되는 문자열 값은 다음과 같습니다.

설정되지 않은 경우, webpack은 production을 mode의 기본값으로 설정합니다.

Defaults per mode

mode 자체가 어떤 작업을 수행하는 것은 아닙니다. 대신 다른 옵션의 기본값을 선택하며, 각 옵션은 명시적으로 설정할 수 있습니다. 다음은 기본값이 mode에 따라 달라지는 옵션입니다.

optimization.splitChunks 역시 mode에 따라 조정됩니다. minSize, enforceSizeThreshold, maxAsyncRequests, maxInitialRequests는 production에서 더 엄격하게 설정됩니다. 각 값은 SplitChunksPlugin을 참고하세요.

두 항목에는 조건이 있습니다. performance.hints는 브라우저 target에만 적용되며, 빌드가 ES 모듈 라이브러리를 출력하는 경우에는 development에서도 devtool이 false로 유지됩니다. experiments.css를 활성화하면 development에서 CSS 애셋의 기본값이 추가로 source-map으로 설정됩니다.

Mode: development

// webpack.development.config.js
export default {
  mode: "development",
};

Mode: production

// webpack.production.config.js
export default {
  mode: "production",
};

Mode: none

// webpack.custom.config.js
export default {
  mode: "none",
};

webpack.config.js 안의 mode 변수에 따라 동작을 변경하려면, 객체 대신 함수를 export 해야 합니다.

const config = {
  entry: "./app.js",
  // ...
};

export default (env, argv) => {
  if (argv.mode === "development") {
    config.devtool = "source-map";
  }

  if (argv.mode === "production") {
    // ...
  }

  return config;
};

Output

최상위 output 키에는 번들, 애셋 및 webpack으로 번들링하거나 로드하는 기타 항목을 출력하는 방법과 위치를 webpack에 지시하는 옵션이 포함되어 있습니다.

output.assetModuleFilename

string = '[hash][ext][query][fragment]' (pathData: PathData, assetInfo?: AssetInfo) => string

output.filename과 동일하지만 애셋 모듈용입니다.

데이터 URI 모듈로부터 빌드된 애셋의 경우 [file], [query], [fragment], [path]는 빈 문자열로 설정되고, [name]과 [base]는 콘텐츠 해시로 해석되며, [ext]는 MIME 타입에서 파생됩니다.

output.asyncChunks

boolean = true

요청 시 로드되는 비동기 청크를 생성합니다.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    asyncChunks: true,
  },
};

output.auxiliaryComment

string object

output.library 및 output.libraryTarget과 함께 사용되는 경우, 사용자가 export 래퍼 내에 주석을 삽입할 수 있습니다. 각 libraryTarget 타입에 동일한 주석을 삽입하려면 auxiliaryComment를 문자열로 설정하세요.

webpack.config.js

export default {
  // ...
  output: {
    library: "someLibName",
    libraryTarget: "umd",
    filename: "someLibName.js",
    auxiliaryComment: "Test Comment",
  },
};

그러면 다음과 같이 생성됩니다.

someLibName.js

(function webpackUniversalModuleDefinition(root, factory) {
  // 테스트 주석
  if (typeof exports === "object" && typeof module === "object") {
    module.exports = factory(require("lodash"));
  }
  // 테스트 주석
  else if (typeof define === "function" && define.amd) {
    define(["lodash"], factory);
  }
  // 테스트 주석
  else if (typeof exports === "object") {
    exports.someLibName = factory(require("lodash"));
  }
  // 테스트 주석
  else {
    root.someLibName = factory(root._);
  }
})(this, (__WEBPACK_EXTERNAL_MODULE_1__) => {
  // ...
});

각 libraryTarget 주석을 세밀하게 제어하려면 객체로 설정하세요.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    auxiliaryComment: {
      root: "Root Comment",
      commonjs: "CommonJS Comment",
      commonjs2: "CommonJS2 Comment",
      amd: "AMD Comment",
    },
  },
};

output.charset

boolean = true

webpack이 HTML의 <script> 태그에 charset="utf-8"을 추가하도록 합니다.

output.chunkFilename

string = '[id].js' (pathData: PathData, assetInfo?: AssetInfo) => string

이 옵션은 초기가 아닌 청크 파일의 이름을 결정합니다. 가능한 값에 대한 자세한 내용은 output.filename 옵션을 참고하세요.

청크 파일 요청을 위해 런타임에서 파일 이름을 생성해야 합니다. 이 때문에 [name] 및 [chunkhash]와 같은 자리 표시자는 webpack 런타임을 사용하여 청크 ID에서 자리 표시자 값으로의 매핑을 출력 번들에 추가해야 합니다. 이렇게하면 크기가 증가하고 청크의 자리 표시자 값이 변경 될 때 번들이 무효화 될 수 있습니다.

기본적으로 이 값은 output.filename에서 유추됩니다. [name], [id], [chunkhash] 또는 [contenthash]를 포함하는 경우 그대로 사용되고, 그렇지 않으면 기본 이름 앞에 [id].가 추가됩니다(bundle.js는 [id].bundle.js가 됨). output.filename이 함수인 경우 [id].js(또는 output.module과 함께 [id].mjs)가 사용됩니다.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    chunkFilename: "[id].js",
  },
};

함수로 사용할 수도 있습니다.

webpack.config.js

export default {
  // ...
  output: {
    chunkFilename: (pathData) =>
      pathData.chunk.name === "main" ? "[name].js" : "[name]/[name].js",
  },
};

output.chunkFormat

false 'array-push' | 'commonjs' | 'module' | string

청크의 포맷 (기본적으로 포함되는 포맷은 'array-push' (web/WebWorker), 'commonjs' (node.js), 'module' (ESM) 등이지만 플러그인에 의해 추가될 수 있습니다).

webpack.config.js

export default {
  // ...
  output: {
    // ...
    chunkFormat: "commonjs",
  },
};

output.chunkLoadTimeout

number = 120000

청크 요청이 만료되기까지의 밀리 초 단위의 시간입니다. 이 옵션은 webpack 2.6.0부터 지원됩니다.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    chunkLoadTimeout: 30000,
  },
};

output.chunkLoadingGlobal

string

output.chunkFormat가 'array-push'일 때(기본적으로 web 및 webworker 타겟) webpack이 청크를 로드하기 위해 사용하는 전역 배열의 이름입니다. 기본 이름은 'webpackChunk' 뒤에 output.uniqueName이 붙으며, JavaScript 식별자에 유효하지 않은 모든 문자는 _로 대체됩니다. 배열은 output.globalObject에 있으므로 my-app 패키지의 브라우저 빌드에서는 self['webpackChunkmy_app']입니다.

모든 청크 파일은 자신의 모듈을 해당 배열에 push하며, 초기 청크에 포함된 런타임은 배열의 push 메서드를 자체 콜백으로 교체합니다. 이를 통해 런타임 이전에 로드된 청크와 이후에 도착하는 청크 모두 설치되어, 비동기 청크 로딩이 고정된 로딩 순서 없이 작동합니다.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    chunkLoadingGlobal: "myCustomFunc",
  },
};

동일한 chunkLoadingGlobal을 공유하는 하나의 문서에 로드된 두 빌드는 서로의 배열에 청크를 push하여 일반적으로 Uncaught TypeError: __webpack_modules__[moduleId] is not a function과 같은 런타임 오류가 발생합니다.

webpack 5는 output.uniqueName에서 기본값을 파생시켜 이를 방지하며, output.uniqueName은 package.json의 name을 기본값으로 사용합니다. 따라서 동일한 패키지 이름으로 빌드된 호스트 애플리케이션과 리모트, 또는 같은 설정으로 두 번 빌드된 라이브러리처럼 페이지의 여러 빌드가 동일한 고유 이름을 가지게 될 경우에만 이 옵션을 설정하면 됩니다.

output.chunkLoading

false 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import' | string

청크를 로드하는 메서드입니다(기본적으로 포함된 메서드는 'jsonp' (web), 'import' (ESM), 'import-scripts' (WebWorker), 'require' (sync node.js), 'async-node' (async node.js)이지만 플러그인에 의해 추가될 수 있습니다).

webpack.config.js

export default {
  // ...
  output: {
    // ...
    chunkLoading: "async-node",
  },
};

output.clean

boolean { dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) }

export default {
  // ...
  output: {
    clean: true, // 내보내기 전에 output 디렉터리를 정리합니다.
  },
};

export default {
  // ...
  output: {
    clean: {
      dry: true, // 삭제하는 대신 제거해야 하는 애셋을 기록합니다.
    },
  },
};

export default {
  // ...
  output: {
    clean: {
      keep: /ignored\/dir\//, // 애셋을 'ignored/dir' 아래에 유지합니다.
    },
  },
};

export default {
  // ...
  output: {
    clean: {
      keep(asset) {
        return asset.includes("ignored/dir");
      },
    },
  },
};

hook과 함께 사용할 수도 있습니다.

webpack.CleanPlugin.getCompilationHooks(compilation).keep.tap(
  "Test",
  (asset) => {
    if (/ignored\/dir\//.test(asset)) return true;
  },
);

output.compareBeforeEmit

boolean = true

출력 파일 시스템에 쓰기 전에 내보낼 파일이 이미 존재하고 동일한 내용이 있는지 확인하도록 webpack에 지시합니다.

export default {
  // ...
  output: {
    compareBeforeEmit: false,
  },
};

output.copy

string (string | object)[]

빌드의 일부로 파일과 디렉터리를 output.path에 복사합니다. 복사된 파일은 다른 애셋과 마찬가지로 애셋이 되어, output.clean이 유지하고 stats에 보고되며, watch 모드에서 소스 파일을 편집하면 나머지를 재빌드하지 않고 다시 복사됩니다.

export default {
  // ...
  output: {
    copy: "static",
  },
};

문자열은 단일 패턴의 from에 대한 단축 표기입니다. 문자열과 패턴 객체를 혼합하여 여러 위치에서 복사하려면 배열을 전달하세요.

export default {
  // ...
  output: {
    copy: [
      // A directory keeps the structure below itself.
      "static",
      // Several sources into one destination, in order.
      { from: ["licenses/*.txt", "vendor/licenses/*.txt"], to: "licenses" },
      // A filename template renames, flattens and hashes.
      { from: "img", to: "i", filename: "[name].[contenthash][ext]" },
    ],
  },
};

복사된 모든 애셋은 asset info에 copied: true와 복사된 원본 파일명 sourceFilename을 포함하므로, 이후 플러그인이 복사된 애셋과 생성된 애셋을 구별할 수 있습니다.

Copy patterns

패턴은 from과 아래의 옵션으로 구성됩니다.

context는 기본적으로 컴파일러 context이며, from이 glob이 아닐 때는 from이 지정하는 것으로 설정됩니다. 따라서 from: 'static'은 static/ 디렉터리가 아닌 static/ 아래의 트리를 복사합니다. 명시적으로 설정하면 패턴의 모든 from을 하나의 디렉터리에 뿌리를 두게 하며, 여러 glob이 공유 구조를 유지하는 방법입니다.

export default {
  // ...
  output: {
    copy: [
      // "vendor/a/x.js" lands at "lib/a/x.js", not at "lib/x.js".
      { from: ["a/**/*.js", "b/**/*.js"], context: "vendor", to: "lib" },
    ],
  },
};

to와 info는 각각 복사 중인 파일의 함수가 될 수 있으며, CopiedFile을 받습니다. filename은 to 상대 경로로 파일이 현재까지 가진 이름입니다.

type CopiedFile = {
  absoluteFilename: string;
  sourceFilename: string;
  filename: string;
};

export default {
  // ...
  output: {
    copy: [
      {
        from: "assets",
        to: (file) => (file.filename.endsWith(".css") ? "css" : "media"),
        info: (file) => ({ immutable: file.filename.endsWith(".png") }),
      },
    ],
  },
};

Glob options

globOptions는 from의 glob이 어떻게 일치하는지를 지정합니다.

export default {
  // ...
  output: {
    copy: [
      {
        from: "static/**/*.html",
        to: "pages",
        globOptions: { dot: false, deep: 2, ignore: ["**/draft-*.html"] },
      },
    ],
  },
};

Transforming content

transform은 파일을 통과하는 동안 재작성합니다. 콘텐츠를 Buffer로, 읽어온 절대 경로를 받아 문자열, Buffer, 또는 이 중 하나의 Promise를 반환할 수 있습니다.

export default {
  // ...
  output: {
    copy: [
      {
        from: "config.json",
        to: "runtime",
        transform: (content) =>
          content.toString().replace("__API__", "https://example.com"),
      },
    ],
  },
};

결과는 파일 콘텐츠에 캐시됩니다. 변환이 다른 것에 의존하는 경우 객체 형식으로 지정하여 변경 시 캐시가 미스되도록 하세요.

export default {
  // ...
  output: {
    copy: [
      {
        from: "config.json",
        transform: {
          transformer: (content) =>
            content.toString().replace("__API__", apiUrl),
          cache: { keys: { apiUrl } },
        },
      },
    ],
  },
};

cache는 캐싱을 건너뛰기 위해 false를 받거나, (defaultKeys, absoluteFilename)을 받아 캐시 키를 반환하는 함수를 받을 수 있습니다.

Copying with the plugin

output.copy는 패턴을 다루고, CopyPlugin은 concurrency와 파일이 복사되는 processAssets stage 두 가지 옵션이 더 있는 동일한 복사입니다. 이 중 하나가 필요할 때 사용하세요.

import webpack from "webpack";

export default {
  // ...
  plugins: [
    new webpack.CopyPlugin({
      patterns: ["static"],
      concurrency: 50,
    }),
  ],
};

output.crossOriginLoading

boolean = false 'anonymous' | 'use-credentials'

청크의 cross-origin 로드를 활성화하도록 webpack에게 전달합니다. script 태그를 추가하여 온 디맨트 청크를 로드할 때 JSONP를 사용하는 'web'으로 target이 설정된 경우에만 적용됩니다.

• 'anonymous' - 자격 증명 없이 cross-origin 활성화
• 'use-credentials' - 자격 증명과 함께 cross-origin 활성화

output.cssChunkFilename

string (pathData: PathData, assetInfo?: AssetInfo) => string

이 옵션은 디스크의 비초기 CSS 출력 파일의 이름을 결정합니다. 가능한 값에 대한 자세한 내용은 'output.filename' 옵션을 참고하세요.

여기에 절대 경로를 지정하면 안 됩니다. 그러나 '/'로 구분된 폴더를 포함해도 됩니다. 이 지정된 경로는 output.path 값과 결합되어 디스크의 위치를 정확히 찾아냅니다.

output.cssFilename

string (pathData: PathData, assetInfo?: AssetInfo) => string

이 옵션은 디스크의 CSS 출력 파일 이름을 결정합니다. 가능한 값에 대한 자세한 내용은 output.filename 옵션을 참고하세요.

여기에 절대 경로를 지정하면 안 됩니다. 그러나 '/'로 구분된 폴더를 포함해도 됩니다. 이 지정된 경로는 output.path 값과 결합되어 디스크의 위치를 정확히 찾아냅니다.

output.devtoolFallbackModuleFilenameTemplate

string (context: ModuleFilenameTemplateContext) => string

위의 템플릿 문자열 또는 함수가 중복을 생성할 때 사용되는 폴백입니다.

output.devtoolModuleFilenameTemplate을 참고하세요.

output.devtoolModuleFilenameTemplate

string = 'webpack://[namespace]/[resource-path]?[loaders]' (context: ModuleFilenameTemplateContext) => string

이 옵션은 devtool이 모듈 이름이 필요한 옵션을 사용하는 경우에만 사용됩니다.

각 소스맵의 sources배열에 사용되는 이름을 사용자 정의합니다. 이는 템플릿 문자열 또는 함수를 전달하여 수행할 수 있습니다. 예를 들어 devtool: 'eval'을 사용하는 경우입니다.

webpack.config.js

export default {
  // ...
  output: {
    devtoolModuleFilenameTemplate:
      "webpack://[namespace]/[resource-path]?[loaders]",
  },
};

아래의 substitution 항목은 webpack의 내부 ModuleFilenameHelpers를 통해 템플릿 문자열에서 사용할 수 있습니다.

함수를 사용할 때 동일한 값은 위에 나열된 프로퍼티 이름 아래 info 파라미터를 통해 사용할 수 있습니다. 항상 캐멀 케이스 템플릿 이름과 동일하지는 않습니다: [id]는 info.moduleId입니다.

export default {
  // ...
  output: {
    devtoolModuleFilenameTemplate: (info) =>
      `webpack:///${info.resourcePath}?${info.loaders}`,
  },
};

여러 모듈의 이름이 동일한 경우 output.devtoolFallbackModuleFilenameTemplate이 대신 사용됩니다.

output.devtoolNamespace

string

이 옵션은 output.devtoolModuleFilenameTemplate과 함께 사용되는 모듈의 네임스페이스를 결정합니다. 지정되지 않은 경우 기본값은 output.uniqueName입니다. webpack으로 빌드된 여러 라이브러리를 로드할 때 소스맵에서 소스 파일 경로 충돌을 방지하는 경우 사용됩니다.

예를 들어, 네임스페이스가 library1과 library2인 라이브러리가 2개 있고 둘 다 ./src/index.js파일(잠재적으로 다른 내용 포함)이 있는 경우 이 파일은 webpack://library1/./src/index.js, webpack://library2/./src/index.js로 내보내집니다.

[name]과 같은 템플릿 문자열을 사용하면 빌드 컨텍스트를 기반으로 네임스페이스를 동적으로 생성하여 추가적인 유연성을 제공할 수 있습니다.

webpack.config.js

export default {
  // ...
  output: {
    filename: "[name]-bundle.js",
    library: "library-[name]",
    libraryTarget: "commonjs",
    devtoolNamespace: "library-[name]", // 각 라이브러리에 대해 고유한 네임스페이스를 설정합니다.
  },
};

output.enabledChunkLoadingTypes

('jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import' | string)[]

엔트리포인트에서 사용할 수 있는 청크 로드의 유형 목록입니다. webpack에 의해 자동으로 채워집니다. 함수를 입력 옵션으로 사용하고, 거기에서 chunkLoading 옵션을 반환할 때만 필요합니다.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    enabledChunkLoadingTypes: ["jsonp", "require"],
  },
};

output.enabledLibraryTypes

string[]

엔트리 포인트에서 사용할 수 있는 라이브러리 타입 목록입니다.

export default {
  // ...
  output: {
    enabledLibraryTypes: ["module"],
  },
};

output.enabledWasmLoadingTypes

string[]

엔트리 포인트에서 사용할 수 있는 wasm 로딩 유형 목록입니다.

export default {
  // ...
  output: {
    enabledWasmLoadingTypes: ["fetch"],
  },
};

output.environment

생성된 런타임 코드에서 어떤 종류의 ES 기능을 사용할 수 있는지 webpack에 알려줍니다.

export default {
  output: {
    environment: {
      // 화살표 기능('() => { ... }')을 지원합니다.
      arrowFunction: true,
      // 해당 환경은 async 함수 그리고 await 함수('async function () { await ... }')를 지원합니다.
      asyncFunction: true,
      // BigInt를 문자 그대로 지원합니다(예를 들어, 123n).
      bigIntLiteral: false,
      // 해당 환경은 변수 선언에 const를 지원합니다.
      const: true,
      // 해당 환경은 변수 선언에 let을 지원합니다.
      let: true,
      // 해당 환경은 논리 할당 연산자('a ||= b', 'a &&= b', 'a ??= b')를 지원합니다.
      logicalAssignment: true,
      // destructuring을 지원합니다('{ a, b } = obj' 처럼 사용합니다).
      destructuring: true,
      // 'document' 변수를 지원합니다.
      document: true,
      // 해당 환경은 'Object.hasOwn'을 지원합니다.
      hasOwn: true,
      // EcmaScript 모듈을 가져오는 비동기 import() 함수를 지원합니다.
      dynamicImport: false,
      // 현재 웹 타켓에 대해서만 worker를 생성할 때 비동기 import()를 지원합니다.
      dynamicImportInWorker: false,
      // 'for of' 반복자를 지원합니다('for (const x of array) { ... }' 처럼 사용합니다).
      forOf: true,
      // 'globalThis'를 지원합니다.
      globalThis: true,
      // ECMAScript 모듈을 가져오는 ECMAScript Module syntax를 지원합니다(import ... from '...' 처럼 사용합니다).
      module: false,
      // 이 환경은 객체 메서드 단축형('{ module() {} }')을 지원합니다.
      methodShorthand: true,
      // 해당 환경은 Node.js 코어 모듈을 동기적으로 로드하기 위한 `process.getBuiltinModule()`을 지원합니다.
      nodeBuiltinModuleGetter: false,
      // node 환경이라면 접두사는 코어 모듈 가져오기에 대해 생성됩니다.
      // 이는 Webpack 런타임 코드에만 적용됩니다.
      nodePrefixForCoreModules: false,
      // 옵셔널 체이닝('obj?.a' 또는 'obj?.()')을 지원합니다.
      optionalChaining: true,
      // 해당 환경은 배열/객체 리터럴 및 호출에서 spread 및 rest('{ ...obj }', 'fn(...args)')를 지원합니다.
      spread: true,
      // 해당 환경은 'Symbol'(및 'Symbol.toStringTag'와 같은 잘 알려진 심볼)을 지원합니다.
      symbol: true,
      // 템플릿 리터럴을 지원합니다.
      templateLiteral: true,
      // 이 환경은 `import.meta.dirname`과 `import.meta.filename`을 지원합니다.
      importMetaDirnameAndFilename: false,
      // 환경이 지연 모듈 평가('import defer * as ns from "..."', 'import.defer("...")')를 지원합니다. webpack 5.110.0부터 지원됩니다.
      deferImport: false,
      // 환경이 source phase import('import source m from "..."', 'import.source("...")')를 지원합니다. webpack 5.110.0부터 지원됩니다.
      sourceImport: false,
    },
  },
};

이러한 기능 플래그는 일반적으로 target에서 추론됩니다. 해당 감지를 재정의하기 위해서만 수동으로 설정합니다. 플래그가 활성화되면 webpack은 생성된 런타임 코드에서 해당하는 최신 구문을 생성하고, 그렇지 않으면 동등한 레거시 출력으로 대체합니다.

output.filename

string (pathData: PathData, assetInfo?: AssetInfo) => string

이 옵션은 각 출력 번들의 이름을 결정합니다. 번들은 output.path 옵션으로 지정된 디렉터리에 작성됩니다.

단일 엔트리 포인트의 경우 정적인 이름으로 설정할 수 있습니다.

webpack.config.js

export default {
  // ...
  output: {
    filename: "bundle.js",
  },
};

그러나 둘 이상의 엔트리 포인트, 코드 분할 또는 다양한 플러그인을 통해 여러 번들을 생성할 때 다음 substitution 중 하나를 사용하여 각 번들에 고유한 이름을 부여해야 합니다.

엔트리 이름을 사용할 수 있습니다.

webpack.config.js

export default {
  // ...
  output: {
    filename: "[name].bundle.js",
  },
};

내부 청크 id를 사용할 수 있습니다.

webpack.config.js

export default {
  // ...
  output: {
    filename: "[id].bundle.js",
  },
};

생성된 콘텐츠에서 생성된 해시를 사용할 수 있습니다.

webpack.config.js

export default {
  // ...
  output: {
    filename: "[contenthash].bundle.js",
  },
};

여러 substitution을 조합할 수 있습니다.

webpack.config.js

export default {
  // ...
  output: {
    filename: "[name].[contenthash].bundle.js",
  },
};

파일 이름을 반환하는 함수를 사용할 수 있습니다.

webpack.config.js

export default {
  // ...
  output: {
    filename: (pathData) =>
      pathData.chunk.name === "main" ? "[name].js" : "[name]/[name].js",
  },
};

자세한 내용은 캐싱 가이드를 참고하세요. 이 옵션을 설정하는 것보다 더 많은 단계를 필요로 합니다.

이 옵션의 이름은 filename 이지만 'js/[name]/bundle.js'와 같이 폴더 구조의 이름을 사용할 수 있습니다.

Template strings

다음 substitution은 webpack의 내부 TemplatedPathPlugin를 통해 템플릿 문자열에서 사용할 수 있습니다.

컴파일 수준에서 사용할 수 있는 substitution입니다.

청크 수준에서 사용할 수 있는 substitution입니다.

모듈 수준에서 사용할 수 있는 substitution입니다.

파일 수준에서 사용할 수 있는 substitution입니다.

URL 수준에서 사용할 수 있는 substitution입니다.

[containedfile]과 [containedpath] 5.110.0+는 결과가 항상 output.path 아래에 있도록 [file]과 [path]를 재작성합니다. 앞쪽 절대 root와 모든 ../ segment를 _/로 바꿉니다. context 밖에서 리졸브된 모듈, 연결된 패키지, 프로젝트 root 위의 파일은 [path]가 ..로 시작하며 이를 파일 이름 template에 사용하면 애셋을 출력 디렉터리 밖에 기록합니다. contained placeholder는 대신 같은 디렉터리 구조를 출력 디렉터리 안에 유지합니다.

// context가 ./src이고 모듈이 ../shared/logo.png에 있는 경우
export default {
  // ...
  output: {
    assetModuleFilename: "[containedpath][name][ext]", // _/shared/logo.png
    // "[path][name][ext]"는 output.path 밖의 ../shared/logo.png로 내보냅니다.
  },
};

experiments.futureDefaults를 활성화하면 애셋과 HTML 모듈에서 [path]와 [file]이 이미 이 방식으로 동작하므로 해당 template은 contained placeholder와 같은 값으로 리졸브됩니다. 이는 webpack 6에서 기본 동작이 됩니다.

hash 길이([hash], [contenthash], [chunkhash])는 [hash:16] 형식으로 지정할 수 있으며 기본값은 20입니다. 또는 output.hashDigestLength로 전역 길이를 설정할 수 있습니다.

webpack 5.108.0부터 hash digest encoding을 [<hash>:<digest>:<length>] 형식으로 인라인 설정할 수도 있습니다(예: [contenthash:base64:8]). digest 기본값은 output.hashDigest(hex)이며 같은 형식을 CSS module localIdentName placeholder에서도 사용할 수 있습니다.

실제 파일 이름에 자리 표시자 중 하나를 사용하려는 경우 자리 표시자 대체를 필터링할 수 있습니다. 예를 들어 [name].js 파일을 출력하려면 대괄호 사이에 백슬래시를 추가하여 [name] 자리 표시자를 이스케이프해야 합니다. 따라서 [\name\]은 애셋의 name으로 대체되는 대신 [name]을 생성합니다.

예제: [\id\]는 id로 교체되지 않고 [id]를 생성합니다.

이 옵션에 대한 함수를 사용하는 경우 함수는 위 표의 substitution 데이터를 포함하는 객체로 전달됩니다. 반환된 문자열에도 substitution이 적용됩니다. 전달 된 객체의 타입은 다음과 같습니다. 프로퍼티는 컨텍스트에 따라 사용 가능합니다.

type PathData = {
  hash: string;
  hashWithLength: (number) => string;
  chunk: Chunk | ChunkPathData;
  module: Module | ModulePathData;
  contentHashType: string;
  contentHash: string;
  contentHashWithLength: (number) => string;
  filename: string;
  url: string;
  runtime: string | SortableSet<string>;
  chunkGraph: ChunkGraph;
};
type ChunkPathData = {
  id: string | number;
  name: string;
  hash: string;
  hashWithLength: (number) => string;
  contentHash: Record<string, string>;
  contentHashWithLength: Record<string, (number) => string>;
};
type ModulePathData = {
  id: string | number;
  hash: string;
  hashWithLength: (number) => string;
};

output.globalObject

string = 'self'

라이브러리를 대상으로 할 때, 특히 library.type이 'umd'인 경우 이 옵션은 라이브러리를 마운트하는 데 사용할 전역 객체를 나타냅니다. UMD빌드를 브라우저와 Node.js에서 모두 사용할 수 있도록 하려면 output.globalObject를 'this'로 설정하세요. 웹과 유사한 대상의 경우 기본값은 self입니다.

엔트리 포인트의 반환 값은 output.library.name 값을 사용하여 전역 객체에 할당됩니다. type 옵션의 값에 따라 전역 객체가 각각 저마다 변경될 수 있습니다. (예: self, global, globalThis)

예제:

webpack.config.js

export default {
  // ...
  output: {
    library: {
      name: "myLib",
      type: "umd",
    },
    filename: "myLib.js",
    globalObject: "this",
  },
};

output.hashDigest

string = 'hex'

해시를 생성할 때 사용하는 인코딩입니다. Node.JS의 모든 인코딩 hash.digest가 지원됩니다. 파일 이름에'base64'를 사용하면 알파벳에 / 문자가 있으므로 문제가 될 수 있습니다. 마찬가지로'latin1'은 모든 문자를 포함 할 수 있습니다.

표준 Node.js 인코딩 외에도 webpack은 더 짧거나 URL에 안전한 해시 값을 생성하기 위한 다음과 같은 사용자 지정 다이제스트 알고리즘을 지원합니다.

• 'base64url' - URL-safe base64 encoding (RFC 4648), recommended for filenames
• 'base62' - Base62 encoding (0-9, A-Z, a-z)
• 'base58' - Base58 encoding (Bitcoin alphabet)
• 'base52' - Base52 encoding (A-Z, a-z)
• 'base49' - Base49 encoding
• 'base36' - Base36 encoding (0-9, a-z)
• 'base32' - Base32 encoding (RFC 4648)
• 'base26' - Base26 encoding (a-z)

이러한 사용자 지정 인코딩은 URL 안전성을 유지하면서 파일 이름의 해시 값을 더 짧게 생성하는 데 특히 유용합니다.

webpack.config.js

export default {
  output: {
    hashDigest: "base64url", // 파일 이름에 대한 URL 안전한 인코딩
  },
};

output.hashDigestLength

number = 20

사용할 해시 다이제스트의 접두사 길이입니다.

output.hashFunction

string = 'md4' function

사용할 해싱 알고리즘입니다. Node.JS의 crypto.createHash의 모든 기능이 지원됩니다. 4.0.0-alpha2부터 hashFunction은 커스텀 해시 함수의 생성자가 될 수 있습니다. 성능상의 이유로 비 암호화 해시 함수를 제공할 수 있습니다.

export default {
  // ...
  output: {
    hashFunction: require("metrohash").MetroHash64,
  },
};

해싱 함수에서 update 및 digest 메소드를 사용할 수 있는지 확인하세요.

output.hashSalt

Node.JS의 hash.update를 통해 해시를 업데이트하기 위해 선택적으로 사용할 수 있는 솔트입니다.

output.hotUpdateChunkFilename

string = '[id].[fullhash].hot-update.js'

핫 업데이트 청크의 파일 이름을 사용자 지정합니다. 가능한 값에 대한 자세한 내용은 output.filename 옵션을 참고하세요.

여기서 허용되는 유일한 자리 표시자는 [id], [fullhash]이며 기본값은 다음과 같습니다.

webpack.config.js

export default {
  // ...
  output: {
    hotUpdateChunkFilename: "[id].[fullhash].hot-update.js",
  },
};

output.hotUpdateGlobal

string

target이 핫 업데이트 로드에 JSONP를 사용하는 'web'으로 설정된 경우에만 사용됩니다.

핫 업데이트 청크를 비동기 적으로 로드하는 경우 사용되는 JSONP 함수입니다.

자세한 정보는 output.chunkLoadingGlobal을 참고하세요.

output.hotUpdateMainFilename

string = '[runtime].[fullhash].hot-update.json'

메인 hot update 파일명을 커스텀합니다. [fullhash]와 [runtime]을 플레이스홀더로 사용할 수 있습니다. output.chunkLoading이 'import'인 경우, 매니페스트가 import()를 통해 로드되므로 기본값은 '[runtime].[fullhash].hot-update.json.mjs'입니다.

output.html

boolean = false object

HTML이 아닌 각 엔트리포인트에 대해 HTML 파일을 생성하고, 해당 엔트리포인트의 초기 JS 및 CSS 출력 청크(dependOn을 통해 공유된 청크 포함)를 주입합니다. 이는 webpack 코어에 내장된 html-webpack-plugin의 일부로, 번들 주변에 문서를 스캐폴딩하는 부분입니다. 실험적 HTML 지원에 의존하므로 experiments.html을 활성화하세요.

// webpack.config.js
export default {
  experiments: { html: true },
  entry: {
    main: "./src/main.js",
  },
  output: {
    html: true,
  },
};

아래 옵션을 사용하려면 object로 설정하세요. entry descriptor의 html 옵션을 통해 entry별로 재정의할 수 있습니다.

output.html.scriptLoading

'auto' | 'defer' | 'blocking'

주입된 <script> tag가 로드되는 방식을 구성합니다.

• 'auto' (기본값): ES module output에서는 module script(type="module")를 emit하고, 그렇지 않으면 deferred script를 emit합니다.
• 'defer': deferred <script defer>를 강제합니다.
• 'blocking': 일반 blocking <script>를 emit합니다.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    html: {
      scriptLoading: "defer",
    },
  },
};

output.html.title

string

생성된 HTML page의 <title>을 설정합니다. HTML에 이미 <title> element가 있으면 건너뜁니다.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    html: {
      title: "My App",
    },
  },
};

output.html.meta

object

page <head>에 <meta> tag를 주입합니다. 각 key는 name attribute(또는 charset 선언의 경우 'charset')이고, value는 content string입니다. og:로 시작하는 key는 name 대신 property attribute를 사용합니다. HTML에 같은 name의 meta가 이미 있으면 해당 tag는 건너뜁니다.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    html: {
      meta: {
        viewport: "width=device-width, initial-scale=1",
        "og:title": "My App",
      },
    },
  },
};

output.html.base

string object

page <head>에 <base> element를 주입합니다. string은 href를 설정하고, object는 href와 선택적으로 target을 설정합니다. HTML에 이미 <base> element가 있으면 건너뜁니다.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    html: {
      base: { href: "https://example.com/", target: "_blank" },
    },
  },
};

output.html.inject

'body' | 'head' | false

주입된 chunk <script> tag(및 <link rel="modulepreload"> clone)를 배치할 위치입니다.

• 'body' (기본값, output.module에서는 'head'): 생성된 page에서 entry tag 옆, <body> 끝에 유지합니다.
• 'head': <head> 안으로 이동합니다.
• false: sibling-chunk 주입을 억제합니다. entry tag와 resource hint는 유지됩니다.

CSS chunk의 stylesheet <link> tag는 영향을 받지 않습니다. page에 <head>가 있으면 항상 <head>에 배치되고, 첫 blocking script보다 앞에 놓입니다. <head>가 없으면 defer / module script tag 뒤에 배치됩니다(html-webpack-plugin이 emit하는 순서).

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    html: {
      inject: "head",
    },
  },
};

output.html.inline

boolean 'script' | 'style' RegExp[]

일치하는 chunk의 content를 별도의 <script> / <link> tag로 emit하지 않고 HTML에 직접 inline합니다.

• true: 모든 chunk를 inline합니다.
• 'script': JavaScript chunk만 inline합니다.
• 'style': CSS chunk만 inline합니다.
• RegExp pattern 배열: 이름이 일치하는 chunk를 inline합니다.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    html: {
      inline: [/^runtime/, /critical/],
    },
  },
};

작성된 HTML page 내부의 개별 참조도 webpackInline magic comment로 inline 여부를 선택할 수 있습니다. 예: <!-- webpackInline: true --><script src="./critical.js"></script>. HTML page의 [contenthash]는 inline된 chunk content를 반영합니다.

output.html.favicon

boolean = false string object function

webpack이 생성한 HTML page의 favicon입니다(작성된 page는 그대로 둠). 모든 icon은 일반 asset pipeline을 통해 hash된 asset으로 emit됩니다.

• false (기본값): 아무것도 주입하지 않습니다.
• true: webpack logo를 주입합니다.
• string: icon 파일 경로이며, <link rel="icon">으로 연결됩니다.
• object: 각 <link rel>을 icon에 매핑합니다. 각 icon은 path string, icon href와 추가 link attribute(sizes, media, color, type, crossorigin)를 가진 object, 또는 같은 rel 아래 여러 icon(예: 여러 sizes, light/dark media variant)을 위한 이들의 배열입니다.
• function: page 이름을 받아 위 값 중 하나를 반환합니다.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    html: {
      favicon: {
        icon: [
          { href: "./favicon.svg", type: "image/svg+xml" },
          { href: "./favicon-32.png", sizes: "32x32" },
        ],
        "apple-touch-icon": "./apple-touch-icon.png",
      },
    },
  },
};

output.html.integrity

boolean string[] function

주입된 <script> / <link> tag에 Subresource Integrity(SRI) integrity attribute를 추가합니다. true는 ['sha384']를 사용합니다. 배열은 hash algorithm을 설정합니다(Node.js crypto.createHash에 전달됨, 예: ['sha256', 'sha384']). 함수는 참조된 각 asset({ chunk, filename })을 받아 사용할 algorithm을 반환하거나, 해당 asset을 건너뛰려면 false를 반환합니다.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    html: {
      integrity: true,
    },
  },
};

output.html.csp

boolean = false object

webpack이 emit한 모든 HTML page에 <meta http-equiv="Content-Security-Policy">를 주입합니다. true는 엄격한 baseline(script-src 'self', style-src 'self', object-src 'none', base-uri 'self')을 사용하고, 모든 inline <script> / <style>의 sha256 hash를 script-src / style-src에 추가합니다. page가 이미 CSP를 선언한 경우 건너뜁니다.

object로 custom할 수 있습니다.

• policy (object): baseline 위에 merge되는 CSP directive입니다. 각 key는 directive(예: 'script-src')이고, value는 source string 또는 list입니다. inline hash와 모든 nonce는 여전히 script-src / style-src에 추가됩니다.
• hashFunction ('sha256' | 'sha384' | 'sha512'): inline <script> / <style> source에 사용되는 hash algorithm입니다.
• nonce (string): 주입된 <script> / <style> tag와 'nonce-…' source로 추가되는 placeholder nonce입니다. server-side에서 request별로 다시 작성하세요.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    html: {
      csp: {
        policy: {
          "img-src": ["'self'", "data:"],
          "connect-src": "https://api.example.com",
        },
      },
    },
  },
};

output.html.manifest

false string object function

webpack이 생성한 HTML page의 Web app manifest입니다(작성된 page는 그대로 둠).

• false (기본값): 아무것도 주입하지 않습니다.
• string: 연결할 기존 .webmanifest 파일의 경로입니다.
• object: manifest content입니다. 직렬화되어 hash된 .webmanifest로 emit되고 <link rel="manifest">로 연결됩니다. icons / screenshots의 src path는 다른 request처럼 resolve되며 hash된 asset으로 emit됩니다.
• function: page 이름을 받아 위 값 중 하나를 반환합니다.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    html: {
      manifest: {
        name: "My App",
        short_name: "App",
        icons: [{ src: "./icon-512.png", sizes: "512x512" }],
      },
    },
  },
};

output.htmlFilename

string = output.filename with '.js' replaced by '.html' (pathData: PathData, assetInfo?: AssetInfo) => string

추출된 HTML 모듈(초기 청크)에서 생성된 HTML 파일의 파일명 템플릿입니다. output.filename처럼 작동하며 동일한 템플릿 문자열을 지원합니다. 설정하지 않으면 output.filename에서 .js 확장자를 .html로 교체하여 파생됩니다(output.filename이 함수이거나, 파생된 템플릿에 [name], [id], 또는 해시 플레이스홀더가 없는 경우 [name].html로 폴백), cssFilename이 filename에서 파생되는 방식과 동일합니다.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    htmlFilename: "[name].html",
  },
};

output.htmlChunkFilename

string = output.chunkFilename with '.js' replaced by '.html' (pathData: PathData, assetInfo?: AssetInfo) => string

비초기(온디맨드) 청크에 대해 추출된 HTML 모듈에 의해 생성되는 HTML 파일의 파일명 템플릿입니다. htmlFilename이 filename에서 기본값을 가져오는 것과 같은 방식으로 output.chunkFilename에서 기본값을 가져옵니다.

// webpack.config.js
export default {
  experiments: { html: true },
  output: {
    htmlChunkFilename: "[name].chunk.html",
  },
};

output.iife

boolean = true

내보낸 코드에 IIFE 래퍼를 추가하도록 webpack에 지시합니다.

export default {
  // ...
  output: {
    iife: true,
  },
};

output.ignoreBrowserWarnings

boolean = false

프로덕션 환경에서 브라우저 콘솔의 경고를 숨깁니다. 이 옵션은 터미널/콘솔 출력에 영향을 주지 않습니다.

webpack.config.js

export default {
  // ...
  output: {
    ignoreBrowserWarnings: true,
  },
};

output.importFunctionName

string = 'import'

네이티브 import()함수의 이름입니다. dynamic-import-polyfill같은 폴리필에 사용할 수 있습니다.

webpack.config.js

export default {
  // ...
  output: {
    importFunctionName: "__import__",
  },
};

output.importMetaName

string

네이티브 import.meta 객체의 이름입니다(폴리필로 교체 가능).

webpack.config.js

export default {
  // ...
  output: {
    importMetaName: "pseudoImport.meta",
  },
};

output.library

엔트리 포인트의 export를 노출하는 라이브러리를 출력합니다 — 번들은 export를 자신이 보유하는 대신 로드하는 측에 전달합니다. 전달 방식은 output.library.type으로 지정합니다: 전역 변수, CommonJS 또는 AMD 모듈, ECMAScript 모듈 등이 있습니다.

• Type: string | string[] | object

간단한 예제를 살펴 보겠습니다.

webpack.config.js

export default {
  // …
  entry: "./src/index.js",
  output: {
    library: "MyLibrary",
  },
};

src/index.js 엔트리에서 함수를 export했다고 가정하겠습니다.

export function hello(name) {
  console.log(`hello ${name}`);
}

이제 변수 MyLibrary가 엔트리 파일의 export와 바인딩됩니다. 다음은 webpack 번들 라이브러리를 사용하는 방법입니다.

<script src="https://example.org/path/to/my-library.js"></script>
<script>
  MyLibrary.hello("webpack");
</script>

위의 예에서 우리는 단일 엔트리 파일을 entry에 전달하고 있지만, webpack은 array 또는 객체 같이 많은 종류의 엔트리 포인트를 받아들일 수 있습니다.

1. entry 포인트로 array를 제공하면 배열의 마지막 항목만 내보냅니다.

   Copy

   export default {
     // …
     entry: ["./src/a.js", "./src/b.js"], // 오직 b.js의 출력만 노출됩니다.
     output: {
       library: "MyLibrary",
     },
   };

2. 객체가 entry 포인트로 제공되면 library의 array 구문을 사용하여 모든 항목을 내보낼 수 있습니다.

   Copy

   export default {
     // …
     entry: {
       a: "./src/a.js",
       b: "./src/b.js",
     },
     output: {
       filename: "[name].js",
       library: ["MyLibrary", "[name]"], // 여기서 name은 자리 표시자입니다
     },
   };

   a.js와 b.js가 둘 다 hello함수를 export 하는것으로 가정하면 다음은 라이브러리를 사용하는 방법입니다.

   Copy

   <script src="https://example.org/path/to/a.js"></script>
   <script src="https://example.org/path/to/b.js"></script>
   <script>
     MyLibrary.a.hello("webpack");
     MyLibrary.b.hello("webpack");
   </script>

   자세한 정보는 이 예제를 참고하세요.

   엔트리 포인트 별로 라이브러리 옵션을 설정하려는 경우 위 설정이 예상대로 작동하지 않습니다. 각 엔트리 별 설정에 대한 방법은 아래와 같습니다.

   Copy

   export default {
     // …
     entry: {
       main: {
         import: "./src/index.js",
         library: {
           // `output.library`의 모든 옵션을 여기서 사용할 수 있습니다.
           name: "MyLibrary",
           type: "umd",
           umdNamedDefine: true,
         },
       },
       another: {
         import: "./src/another.js",
         library: {
           name: "AnotherLibrary",
           type: "commonjs2",
         },
       },
     },
   };

output.library.amdContainer

컨테이너(전역 공간에 정의됨)를 사용하여 AMD 모듈에서 define/require 함수를 호출합니다.

export default {
  // …
  output: {
    library: {
      amdContainer: 'window["clientContainer"]',
      type: "amd", // or 'amd-require'
    },
  },
};

그러면 다음과 같은 번들이 생성됩니다.

window["clientContainer"].define(/* define args */); // or 'amd-require' window["clientContainer"].require(/*require args*/);

output.library.umdAmdContainer

string

define을 전역이 아닌 container 객체에 노출하는 AMD 방식 loader용 분기를 UMD wrapper에 추가합니다. container는 점으로 구분된 경로로 지정합니다. 분기는 표준 define.amd 바로 뒤에 내보내므로 일반 AMD loader가 계속 우선하며, 해당 container가 존재하는 환경에서만 사용됩니다.

export default {
  // ...
  output: {
    library: {
      name: "MyLibrary",
      type: "umd",
      umdAmdContainer: "myContainer.amdLoader",
    },
  },
};

값은 임의의 표현식이 아니라 점으로 구분된 식별자 경로(myContainer.amdLoader)여야 합니다.

output.library.name

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
    },
  },
};

라이브러리 이름을 설정할 수 있습니다.

• Type:

  Copy

  string | string[] | {amd?: string, commonjs?: string, root?: string | string[]}

output.library.type

라이브러리가 발행되는 모듈 형식을 설정합니다 — 전역 변수, CommonJS 또는 AMD 모듈, ECMAScript 모듈 등. type은 webpack이 번들 주변에 작성하는 래퍼를 결정하며, 따라서 소비자가 내보내기에 접근하는 방법을 결정합니다.

• 타입: string

  기본적으로 포함되는 타입은 'var', 'module', 'modern-module', 'assign', 'assign-properties', 'this', 'window', 'self', 'global', 'commonjs', 'commonjs2', 'commonjs-module', 'commonjs-static', 'amd', 'amd-require', 'umd', 'umd2', 'jsonp' 그리고 'system'입니다. 다른 것들은 플러그인에 의해 추가될 수 있습니다.

name: 'MyLibrary'를 사용하는 type의 동작을 한눈에 보면:

다음 예제에서는 _entry_return_을 사용하여 엔트리 포인트에서 반환된 값을 나타냅니다.

Expose a Variable

이 옵션들은 엔트리 포인트에서 내보낸 값을 번들이 로드된 모든 스코프에서 output.library.name으로 주어진 이름에 할당합니다.

type: 'var'

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "var",
    },
  },
};

라이브러리가 로드되면 엔트리 포인트의 반환 값이 변수에 할당됩니다.

const MyLibrary = _entry_return_;

// `MyLibrary`가 로드 된 별도의 스크립트
MyLibrary.doSomething();

type: 'assign'

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "assign",
    },
  },
};

이렇게 하면 기존 값을 다시 할당할 수 있는 암시적인 전역이 생성됩니다. 이 값은 주의해서 사용해야 합니다.

MyLibrary = _entry_return_;

MyLibrary가 이전에 정의되지 않은 경우 라이브러리는 전역 범위로 설정됩니다.

type: 'assign-properties'

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "assign-properties",
    },
  },
};

type: 'assign'과 유사하지만 이미 존재하는 경우 MyLibrary를 재사용하므로 더 안전한 옵션입니다.

// 존재하지 않는 경우에만 MyLibrary를 만듭니다.
MyLibrary = typeof MyLibrary === "undefined" ? {} : MyLibrary;
// 그런 다음 반환 값을 MyLibrary에 복사합니다.
// Object.assign이 하는 동작과 같습니다.

// 예를 들어 다음과 같이 엔트리에 `hello`함수를 export합니다.
export function hello(name) {
  console.log(`Hello ${name}`);
}

// MyLibrary가 로드된 다른 스크립트에서
// 이렇게 `hello`함수를 실행할 수 있습니다.
MyLibrary.hello("World");

Expose Via Object Assignment

이 옵션은 output.library.name에 정의된 이름 아래의 특정 객체에 엔트리 포인트의 반환 값(export한 엔트리 포인트에 관계없이)을 할당합니다.

type: 'this'

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "this",
    },
  },
};

엔트리 포인트의 반환 값은 output.library.name이라는 속성 아래의 this에 할당됩니다. this의 의미는 당신에게 달려있습니다.

this.MyLibrary = _entry_return_;

// 별도의 스크립트
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // `this`가 window인 경우

type: 'window'

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "window",
    },
  },
};

엔트리 포인트의 반환 값은 output.library.name값을 사용하여 window 객체에 할당됩니다.

window.MyLibrary = _entry_return_;

window.MyLibrary.doSomething();

type: 'self'

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "self",
    },
  },
};

window 대신 self에 대한 동일한 할당으로, 이는 web worker가 사용하는 것입니다:

self.MyLibrary = _entry_return_;

type: 'global'

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "global",
    },
  },
};

엔트리 포인트의 반환 값은 output.library.name 값을 사용하여 전역 객체에 할당됩니다. 어떤 객체인지는 output.globalObject에서 결정되며, 기본값은 target을 따릅니다. 즉, 동일한 설정에서 타겟에 따라 다른 첫 번째 토큰이 출력됩니다:

// target: 'web' (the default) and target: 'webworker', where it is `self`
self.MyLibrary = _entry_return_;

// target: 'node', where it is `global`
global.MyLibrary = _entry_return_;

// target: ['web', 'node'], where it is `globalThis`
globalThis.MyLibrary = _entry_return_;

type: 'commonjs'

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "commonjs",
    },
  },
};

엔트리 포인트의 반환 값은 output.library.name 값을 사용하여 exports객체에 할당됩니다. 이름에서 알 수 있듯이 CommonJS 환경에서 사용됩니다.

exports.MyLibrary = _entry_return_;

require("MyLibrary").doSomething();

Module Definition Systems

이 옵션은 다양한 모듈 시스템과의 호환성을 보장하기 위한 헤더와 함께 제공되는 번들을 생성합니다. output.library.name은 output.library.type에서 다른 의미를 갖습니다.

type: 'module'

export default {
  // …
  output: {
    module: true,
    library: {
      // 여기에 `name`을 지정하지 마세요.
      type: "module",
    },
  },
};

실제 ECMAScript 모듈을 출력합니다: 번들이 할당 대신 export 문으로 끝나므로 소비자는 import로 가져올 수 있습니다. 내보내기 이름은 엔트리 포인트에서 가져오므로 지정할 name이 없습니다.

Input:

export function hello(name) {
  return `Hello ${name}`;
}

Output:

function hello(name) {
  return `Hello ${name}`;
}

export { hello };

type: 'modern-module'

export default {
  // …
  output: {
    module: true,
    library: {
      // 여기에 `name`을 지정하지 마세요
      type: "modern-module",
    },
  },
};

module과 유사하며, 소비자가 다른 번들러로 처리하는 라이브러리를 위해 설계되었습니다: 출력은 분석 가능한 상태로 유지되어 소비자의 트리 쉐이킹이 애플리케이션에서 한 번도 import하지 않는 내보내기를 여전히 제거할 수 있습니다. 소규모 라이브러리는 두 type에서 바이트 단위로 동일하게 출력되는 경우가 많으며, 차이점은 module이 내보내는 것을 불분명하게 만들 수 있는 번들에서 나타납니다.

동일한 이유로 output.module도 필요하며, name을 지정하지 않습니다.

type: 'commonjs2'

export default {
  // …
  output: {
    library: {
      // 여기에는 `name`이 없습니다.
      type: "commonjs2",
    },
  },
};

엔트리 포인트의 반환 값은 module.exports에 할당됩니다. 이름에서 알 수 있듯이 Node.js (CommonJS) 환경에서 사용됩니다.

export default _entry_return_;

require("MyLibrary").doSomething();

type: commonjs2와 함께 output.library.name을 지정하면 엔트리 포인트의 반환 값이 module.exports.[output.library.name]에 할당됩니다.

type: 'commonjs-module'

commonjs-module은 commonjs2와 동일합니다. 향후 버전에서는 commonjs-module을 제거할 수 있습니다.

type: 'commonjs-static'

export default {
  // …
  output: {
    library: {
      // 참고로 여기에는 `name`이 없습니다
      type: "commonjs-static",
    },
  },
};

개별 내보내기는 module.exports의 속성으로 설정됩니다. 이름의 "static"은 정적으로 분석 가능한 출력을 의미하므로 명명된 내보내기는 Node.js를 통해 ESM으로 가져올 수 있습니다.

입력:

export function doSomething() {}

출력:

function doSomething() {}

// …

exports.doSomething = __webpack_exports__.doSomething;

Consumption (CommonJS):

const { doSomething } = require("./output.cjs"); // doSomething => [Function: doSomething]

Consumption (ESM):

import { doSomething } from "./output.cjs"; // doSomething => [Function: doSomething]

type: 'amd'

라이브러리를 AMD 모듈로 내보냅니다.

AMD 모듈은 일반적으로 RequireJS 또는 almond같은 호환 가능한 로더에서 제공하는 define 및 require와 같은 특정 속성으로 엔트리 청크(<script>태그에 의해 로드된 첫 번째 스크립트)를 정의해야합니다.

아래의 설정을 참고하세요.

export default {
  // ...
  output: {
    library: {
      name: "MyLibrary",
      type: "amd",
    },
  },
};

생성된 출력은 "MyLibrary"라는 이름으로 정의됩니다. 예제는 아래와 같습니다.

define("MyLibrary", [], () => _entry_return_);

번들은 script 태그의 일부로 포함될 수 있으며 번들은 다음과 같이 호출될 수 있습니다.

require(["MyLibrary"], (MyLibrary) => {
  // 라이브러리로 무언가를 할 수 있습니다.
});

output.library.name이 정의되어 있지 않으면 아래의 코드가 대신 생성됩니다.

define(() => _entry_return_);

이 번들은 예상대로 작동하지 않거나 almond 로더의 경우 <script>태그를 사용하여 직접 로드했을 때 전혀 작동하지 않습니다. 해당 파일의 실제 경로를 통해 RequireJS 호환 비동기 모듈 로더를 통해서만 작동하므로, 이 경우 output.path 및 output.filename이 서버에 직접 노출되는 경우 특정 설정에서 중요할 수 있습니다.

type: 'amd-require'

export default {
  // ...
  output: {
    library: {
      name: "MyLibrary",
      type: "amd-require",
    },
  },
};

즉시 실행되는 AMD require(dependencies, factory)래퍼로 출력을 패키징합니다.

'amd-require' 타입을 사용하면 나중에 별도의 호출없이 AMD 디펜던시를 사용할 수 있습니다. 'amd' 타입과 마찬가지로 이는 webpack 출력이 로드되는 환경에서 사용할 수 있는 적절한 require 함수에 따라 달라집니다.

이 타입에서는 라이브러리 이름을 사용할 수 없습니다.

type: 'umd'

이렇게 하면 모든 모듈 정의 아래에 라이브러리가 내보내져서 CommonJS, AMD 및 전역 변수와 함께 작동 할 수 있습니다. 자세한 내용은 UMD Repository를 참고하세요.

이 경우 모듈 이름을 지정하려면 library.name 프로퍼티가 필요합니다.

export default {
  // ...
  output: {
    library: {
      name: "MyLibrary",
      type: "umd",
    },
  },
};

출력은 다음과 같습니다.

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === "object" && typeof module === "object") {
    module.exports = factory();
  } else if (typeof define === "function" && define.amd) {
    define([], factory);
  } else if (typeof exports === "object") {
    exports.MyLibrary = factory();
  } else {
    root.MyLibrary = factory();
  }
})(globalThis, () => _entry_return_);

library.name을 생략하면 객체 할당 섹션에 설명 된 대로 엔트리 포인트에서 반환된 모든 속성이 루트 객체에 직접 할당됩니다. 예제는 아래와 같습니다.

export default {
  // ...
  output: {
    type: "umd",
  },
};

출력은 다음과 같습니다.

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === "object" && typeof module === "object") {
    module.exports = factory();
  } else if (typeof define === "function" && define.amd) {
    define([], factory);
  } else {
    const a = factory();
    for (const i in a) (typeof exports === "object" ? exports : root)[i] = a[i];
  }
})(globalThis, () => _entry_return_);

target마다 다른 이름을 설정하기 위해 library.name에 대한 객체를 설정할 수 있습니다.

export default {
  // ...
  output: {
    library: {
      name: {
        root: "MyLibrary",
        amd: "my-library",
        commonjs: "my-common-library",
      },
      type: "umd",
    },
  },
};

type: 'umd2'

umd2는 umd와 동일한 유니버설 헤더를 생성하지만 한 가지가 다릅니다: AMD 로더가 제공하지 않은 경우, 선택적 AMD 외부 모듈을 undefined로 두는 대신 전역 객체에서 읽어옵니다. 따라서 선택적 AMD 외부 모듈이 없는 번들은 두 type 모두에서 바이트 단위로 동일한 출력을 생성합니다.

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "umd2",
    },
  },
};

type: 'system'

라이브러리를 System.register모듈로 내보냅니다. 이 기능은 webpack 4.30.0에서 처음 출시되었습니다.

시스템 모듈은 webpack 번들이 실행될 때 브라우저에 전역 변수 System이 있어야합니다. System.register형식으로 컴파일하면 추가 설정없이 System.import('/bundle.js')를 수행하고 webpack 번들을 시스템 모듈 레지스트리에 로드할 수 있습니다.

export default {
  // ...
  output: {
    library: {
      type: "system",
    },
  },
};

출력은 다음과 같습니다.

System.register([], (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) => ({
  execute() {
    // ...
  },
}));

output.library.type을 system으로 설정하는 것 외에도 output.library.name을 설정에 추가하면 출력 번들은 System.register에 대한 인수로 라이브러리 이름을 갖게됩니다.

System.register(
  "MyLibrary",
  [],
  (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) => ({
    execute() {
      // ...
    },
  }),
);

Other Types

type: 'jsonp'

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "jsonp",
    },
  },
};

이것은 엔트리 포인트의 반환 값을 jsonp 래퍼로 래핑합니다.

MyLibrary(_entry_return_);

라이브러리에 대한 디펜던시는 externals 설정에 의해 정의됩니다.

output.library.export

라이브러리로 노출되어야하는 export를 지정할 수 있습니다.

• Type: string | string[]

undefined가 기본값으로 설정되어 있으며 전체 네임스페이스 객체를 내보냅니다. 아래 예는 output.library.type: 'var'를 사용할 때 이 설정의 효과를 보여줍니다.

export default {
  output: {
    library: {
      name: "MyLibrary",
      type: "var",
      export: "default",
    },
  },
};

엔트리 포인트의 기본 export가 라이브러리 이름에 할당됩니다.

// 엔트리에 default export가 있는 경우
const MyLibrary = _entry_return_.default;

output.library.export에도 배열을 전달할 수 있으며, 라이브러리 이름에 할당될 모듈의 경로로 해석됩니다.

export default {
  output: {
    library: {
      name: "MyLibrary",
      type: "var",
      export: ["default", "subModule"],
    },
  },
};

아래는 라이브러리 코드입니다.

const MyLibrary = _entry_return_.default.subModule;

output.library.auxiliaryComment

UMD 래퍼에 주석을 추가합니다.

• Type: string | { amd?: string, commonjs?: string, commonjs2?: string, root?: string }

각 umd 타입에 대해 동일한 주석을 삽입하려면 auxiliaryComment를 문자열로 설정하세요.

export default {
  // …
  mode: "development",
  output: {
    library: {
      name: "MyLibrary",
      type: "umd",
      auxiliaryComment: "Test Comment",
    },
  },
};

아래와 같은 산출물이 생성됩니다.

(function webpackUniversalModuleDefinition(root, factory) {
  // 테스트 주석
  if (typeof exports === "object" && typeof module === "object") {
    module.exports = factory();
  }
  // 테스트 주석
  else if (typeof define === "function" && define.amd) {
    define([], factory);
  }
  // 테스트 주석
  else if (typeof exports === "object") {
    exports.MyLibrary = factory();
  }
  // 테스트 주석
  else {
    root.MyLibrary = factory();
  }
})(globalThis, () => _entry_return_);

세부적인 제어를 위해 객체를 전달합니다.

export default {
  // …
  mode: "development",
  output: {
    library: {
      name: "MyLibrary",
      type: "umd",
      auxiliaryComment: {
        root: "Root Comment",
        commonjs: "CommonJS Comment",
        commonjs2: "CommonJS2 Comment",
        amd: "AMD Comment",
      },
    },
  },
};

output.library.umdNamedDefine

boolean

output.library.type: "umd"를 사용할 때 output.library.umdNamedDefine을 true로 설정하면 UMD 빌드의 AMD 모듈 이름이 지정됩니다. 그렇지 않으면 익명의 define이 사용됩니다.

export default {
  // ...
  output: {
    library: {
      name: "MyLibrary",
      type: "umd",
      umdNamedDefine: true,
    },
  },
};

AMD 모듈은 다음과 같습니다.

define("MyLibrary", [], factory);

output.libraryExport

string string[]

libraryTarget을 통해 노출될 모듈을 구성합니다. 기본적으로 undefined이며 libraryTarget을 ''같이 빈 문자열로 설정하면 동일한 동작이 적용됩니다(전체 네임 스페이스 객체를 export). 아래 예제는 libraryTarget: 'var'를 사용할 때 이 설정의 효과를 보여줍니다.

다음 설정이 지원됩니다.

libraryExport: 'default' - 엔트리 포인트의 default export 가 라이브러리 target에 할당됩니다.

// 엔트리에 `MyDefaultModule`의 default export가 있는 경우
const MyDefaultModule = _entry_return_.default;

libraryExport: 'MyModule' - 지정된 모듈 이 라이브러리 target에 할당됩니다.

const { MyModule } = _entry_return_;