Configuration Languages

Webpack은 여러 프로그래밍과 데이터 언어로 작성된 설정 파일을 사용할 수 있습니다. 지원되는 파일 확장자 목록은 node-interpret 패키지에서 확인할 수 있습니다. Webpack은 node-interpret를 사용하여, 다양한 유형의 설정 파일을 처리할 수 있습니다.

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,

    // Allows you to write `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>
);

Edit this page·

« Previous

Configuration

Configuration Types

13 Contributors

Translators

dkstyle