Configuration Languages

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

TypeScript

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

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

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

webpack.config.ts

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

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": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

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

tsconfig.json 파일도 확인해야 합니다. 만약 tsconfig.json에서 compilerOptions의 module이 commonjs라면 설정이 완료되지만, 그렇지 않으면 webpack이 에러와 함께 실패하게 됩니다. 이는 ts-node가 commonjs 이외의 다른 모듈 구문은 지원하지 않기 때문입니다.

이 문제는 세 가지 해결 방법이 있습니다.

• tsconfig.json을 수정합니다.
• tsconfig.json을 수정하고 ts-node를 위한 설정을 추가합니다.
• tsconfig-paths를 설치합니다.

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

두 번째 방법은 ts-node에 대한 설정을 추가하는 것입니다.

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

HtmlWebpackPlugin = require('html-webpack-plugin')
webpack = require('webpack')
path = require('path')

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')
  ]

module.exports = 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>
);