캡틴판교 타입스크립트) 웹팩설정 공부

웹팩을 사용하는 이유

1. 파일 단위의 자바스크립트 모듈 관리의 필요성
2. 웹 개발 자동화 도구
3. 빠른 로딩속도와 높은 성능

이러한 이유로 웹팩이 등장하게 되었다. 위에서 말했든 웹팩에서는 HTML, CSS, Javascript 등을 하나의 모듈로 보고 이를 조합해서 하나의 결과물로 만드는 모듈 번들러이다.

타입스크립트는 자바스크립트로 변환해야 코드의 실행이 가능한데, 이 때 변환하는 과정을 웹팩을 이용해 자동화해줄 수 있다.

웹팩 설정방법

웹팩 관련 라이브러리와 lodash라이브러리를 아래의 명령어로 설치한다

$ npm i webpack webpack-cli -D
$ npm i lodash

module.exports = {
  entry: path.resolve(__dirname, './src'), // src 내부의 index.js 를 바라본다
  output: { // 빌드한 결과물을 어디에 생성할 것 인가
    filename: 'bundle.[hash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [ // 어떤 파일들을 어떤 loader 를 이용하여 해석 할 것 인가
      {
        test: /\\.(js)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.js'], // .js 확장자 생략 가능
  },
}