진행되고 있는 프로젝트에 웹팩과 바벨 설정을 해보았다

webpack

자바스크립트 모듈 번들러

webpack-dev-server

webpack-dev-server는 애플리케이션을 빠르게 개발하는 데 사용할 수 있도록 개발 시에 잠시 사용하는 클라이언트 서버

npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.ts", // 번들링 시작 위치
  output: {
    path: path.join(__dirname, "/dist"), // 번들 결과물 위치
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /[\.js]$/, // .js 에 한하여 babel-loader를 이용하여 transpiling
        exclude: /node_module/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.ts$/, // .ts 에 한하여 ts-loader를 이용하여 transpiling
        exclude: /node_module/,
        use: {
          loader: "ts-loader",
        },
      },
    ],
  },
  resolve: {
    modules: [path.join(__dirname, "src"), "node_modules"], // 모듈 위치
    extensions: [".ts", ".js"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html", // 템플릿 위치
    }),
  ],
  devServer: {
    host: "localhost", // live-server host 및 port
    port: 5500,
  },
  mode: "development", // 번들링 모드 development / production
};

npm install -D typescript ts-loader

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "moduleResolution": "node",
    "strict": false,
    "allowSyntheticDefaultImports": true
  }
}

babel

자바스크립트 트랜스파일러

npm install -D @babel/core @babel/preset-env babel-loader @babel/preset-typescript
npm install -D @babel/plugin-transform-runtime

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

package.json

  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --config webpack.config.js --env env=prod"
  }