webpack logo

Configuration Languages

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

defineConfig

5.108.0+

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를 위한 설정을 추가합니다.
  • tsconfig-paths를 설치합니다.

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

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

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

세 번째 방법은 tsconfig-paths 패키지를 설치합니다.

npm install --save-dev tsconfig-paths

webpack 설정에 맞게 별도의 TypeScript 설정을 만듭니다.

tsconfig-for-webpack-config.json

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

그런 다음 tsconfig-paths에서 제공하는 환경 변수 process.env.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 HtmlWebpackPlugin from 'html-webpack-plugin'
import webpack from 'webpack'

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

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

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)

webpack-cli v7.1.0+

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

ExtensionParser package
.json5json5
.yaml, .ymljs-yaml
.tomltoml

파서는 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"
Edit this page·
« Previous
Configuration
Next »
Configuration Types

13 Contributors

piousonsokraskipjacktarang9211simon04peterblazejewiczyouta1119byzykNek-liyiming22daimalouChocolateLoverRajsnitin315

Translators

dkstyle dkstyle