TypeScript / Webpack

번들러

웹앱을 구성하는 asset(스크립트, 스타일시트, 이미지 등)을 모두 묶어 최적화된 여러 파일로 만들어주는 도구로,

성능을 최적화해주며, 의존성 관리에 유용하고, 개발 과정에서 필요한 작업을 간소화하기 때문에 편의성을 가지고 있다.

 

 

Webpack

타입스크립트 가이드 : https://webpack.kr/guides/typescript/

• JS 앱을 위한 정적 모듈 번들러
• 여러 파일(js, css, html, 이미지) 등을 번들해 하나 혹은 여러 파일로 묶어주는 도구
• 모듈 번들링 / 로더 / 플러그인을 지원함

 

---

 

실습

디렉토리 구성

 

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "noUncheckedIndexedAccess": true
  },
  "include": ["src"]
}

 

 

터미널에서 package.json 초기파일 생성 후 ts 개발 의존성으로 설치

npm init -y
npm i --save-dev typescript

 

 

index.html은 emmet 약어로 html 기본 틀을 생성한다.

 

dice.ts

export default class Dice {
  constructor(private sides: number) {}
  roll(): number {
    let number = Math.floor(Math.random() * this.sides) + 1;
    return number;
  }
}

 

index.ts

import Dice from './util/dice';

const labels = {
  button: '주사위 던지기',
  div: '결과 : ',
};

function main() {
  const button = document.createElement('button');
  const resultDiv = document.createElement('div');
  button.innerText = labels.button;
  document.body.append(button, resultDiv);

  const dice = new Dice(6);

  button.addEventListener('click', () => {
    resultDiv.innerText = `${labels.div}${dice.roll()}`;
  });
}

main();

 

 

이제 지금까지의 코드를 webpack으로 번들링을 해보고자 한다.

 

터미널에서 다음 패키지들을 설치한다.

 

- webpack-cli : 터미널에서 webpack을 명령어로 실행할 수 있게 해줌

- webpack-dev-server : 개발 중 사용할 수 있는 로컬 개발 서버 (코드 변경 시 자동으로 리프레시됨)

- html-webpack-plugin : 번들링된 Js파일을 자동으로 html에 삽입해줌

- ts-loader : ts파일을 Webpack에서 js로 변환해주는 로더로 tsconfig.json을 참고해 컴파일함

npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin ts-loader

 

 

그리고 https://webpack.kr/guides/typescript/ 에서 webpack.config.js 설정을 안내해주는데, 이를 사용하고자 한다.

 

 

 

webpack.config.js (프로젝트 폴더 최상단에 위치)

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

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
  ],
};

 

 

마지막으로 webpack-dev-server로 실행하기 위해 package.json에 스크립트를 추가하면

  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },

잘 실행됨을 확인할 수 있다.

 

 

배포용 빌드하기는 위에서 추가한 스크립트를 사용하면 된다.

npm run build

 

 

그러면 이렇게 dist 파일 내에 압축된 bundle.js와 index.html이 생성된다.