Section11. TS와 함께 Webpack 사용하기

𝟭. Webpack이란 무엇이며 왜 필요한가?

✔️ 웹팩 : 파일을 묶는(bundle) 것을 도와주는 도구

➰ 코드를 묶음으로써 HTTP 요청의 양을 줄여준다.

➰ 코드를 최적화(최대한 작게) 하고, 빌드 절차를 추가하고, 추가 빌드 툴을 제공한다. 

 

𝟮. Webpack 설치하기 & 중요 종속성

npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader
//  --save-dev:모듈을 설치할 때 package.json 내의 devDependencies 항목에 설치한 모듈과 버전을 넣는 것
// 실제 릴리즈시에는 필요없는 모듈의 경우

➰ webpack-cli : 프로젝트에서 웹팩 명령어를 실행하기 위함.

➰ webpack-server : 개발 서버 내에서 빌트하기 위함

➰ typescript : 프로젝트마다 typescript의 사본을 설치하는 것은 좋은 관행.

➰ ts-loader : 웹팩과 함께 동작할 패키지로 웹팩에세 어떻게 코드를 자바스크립트로 변환할 것인지를 전달한다.

 

𝟯. 입력 & 출력 구성하기

➰ tsconfig.json

     ㄴ  module은 ES2015 또는 ES6으로 설정되어야 한다.

     ㄴ  "outDir": "./dist" 

     ㄴ "sourceMap": true

     ㄴ "scripts" : { 

                "build": "webpack"

           }

 

➰ webpack.config.js 파일을 생성한다.

const path = require('path');

module.exports = {
  // node.js에서 export하는 방법
  
  mode: 'development',
  // 웹팩에게 여기서 우리가 개발을 하려고 빌드하고 있음을 전달
  // 'production'으로 하면 웹팩에세 최적화, 코드 경령화 등을 지시하는 것
  entry: ./src/app.ts,
  // 어느 파일에서 프로젝트가 시작하는지
  output: {
  // 마지막에 생성되는 단일 자바스크립트 파일이 될 것
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // dist 폴더로의 절대 경로를 구축하고, 웹팩은 그것을 사용해서 출력을 쓰게 된다.
    publicPath: 'dist'
    // webpack-dev-server 사용햐기 위한 설정
  },
  devtool: 'inline-source-map',
  module: {
    rules: {
    // 다양한 파일 관련 규칙들을 추가할 수 있다.
      {
        test: /\.ts$/,
        // 이 규칙이 해당 파일에 적용되는지 여부를 알아내기 위해 찾은 파일에 대해 수행할 시험
        // 웹팩에게 .ts로 끝나는 파일들을 점검하도록 한다.
        use: 'ts-loader',
        // 웹팩이 이 파일로 무엇을 하는지
        exclude: /node_modules/
        // 웹팩이 노드 모듈을 찾지 않는다.
      }
    }
  }
  resolve: {
    extensions: ['.ts', '.js']
    // 웹팩에게 .ts파일, .js파일을 찾아야 한다고 알려준다.
  }
};

 

𝟰. webpack-dev-server 추가하기

✔️ package.json 에서 "start": "webpack-dev-server"로 수정한다.

➰ 코드에서 무언가를 변경하면 알아서 다시 컴파일하지만, 번들은 메모리에만 생성된다.

➰ webpack.config.js의 output에 publicPath를 추가해주어야 dist폴더와 연결된다.

 

𝟱. 생산 워크플로우 추가하기

1️⃣ wevpack.config.prod.js 파일 생성하기

const path = require('path');
const CleanPlugin = require('clean-webpack-plugin');

module.exports = {
  // node.js에서 export하는 방법
  
  mode: 'production',
  // 'production'으로 하면 웹팩에세 최적화, 코드 경령화 등을 지시하는 것
  entry: ./src/app.ts,
  // 어느 파일에서 프로젝트가 시작하는지
  output: {
  // 마지막에 생성되는 단일 자바스크립트 파일이 될 것
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // dist 폴더로의 절대 경로를 구축하고, 웹팩은 그것을 사용해서 출력을 쓰게 된다.
  },
  devtool: none,
  // 프로덕션 모드에서는 소스맵을 생성할 필요가 없다.
  module: {
    rules: {
    // 다양한 파일 관련 규칙들을 추가할 수 있다.
      {
        test: /\.ts$/,
        // 이 규칙이 해당 파일에 적용되는지 여부를 알아내기 위해 찾은 파일에 대해 수행할 시험
        // 웹팩에게 .ts로 끝나는 파일들을 점검하도록 한다.
        use: 'ts-loader',
        // 웹팩이 이 파일로 무엇을 하는지
        exclude: /node_modules/
        // 웹팩이 노드 모듈을 찾지 않는다.
      }
    }
  }
  resolve: {
    extensions: ['.ts', '.js']
    // 웹팩에게 .ts파일, .js파일을 찾아야 한다고 알려준다.
  },
  plugins: [
    new CleanPlugin.CleanWebpackPlugin()
  ]
  // dist 폴더 내에 항상 가장 최신의 출력이 있게 된다.
};

 

2️⃣ 패키지 설치하기

npm install --save-dev clean-webpack-plugin

➰ 프로젝트를 다시 빌드 할 때마다 dist폴더를 비워준다.

 

3️⃣ packge.json 수정하기

"build": "webpack --config webpack.config.prod.js"
// 웹팩에게 기본적으로 찾는 webpack.congig.js 파일 대신에 dist구성 파일을 사용하도록 지시한다.