웹팩 (Webpack) -수정중...

Webpack 공식 홈페이지 : https://webpack.js.org/

 

웹팩을 설치하기 위해서는 진행하고 있는 프로젝트를 node.js의 패키지 프로젝트로 만들 필요가 있다.

$ npm init

 

유데미 Typescript: 섹션9 Drag&Drop 프로젝트

모든 HTTP 요청에는 베이스 오버헤드(base overhead), 지속(duration)이 발생한다.
실제 파일 다운로드는 비교적 빨리 진행되지만, 요청(request)을 설정하고, 서버에서 수행되는 것은 시간이 다소 걸리게 된다.

로컬 개발(local development) 서버에서 모든 것들은 우리 머신(machine) 상에서 이루어지고 있기 때문에 설정(setup)은 빠르게 진행되지만, 웹에서 실행하는 경우 이렇게 다수의 요청이 있다면 HTTP 요청의 양만으로 인해 다량의 대기시간이 발생하고 프로젝트가 느려질 수 있다.

이 때, 웹팩(Webpack)을 이용하여 요청의 양을 줄일 수 있다.

 

webpack을 이용하여 불필요한 http요청을 줄임

 

 

Normal Setup	Webpack
여러 개의 타입스크립트 파일 & imports (HTTP 요청)	코드를 묶어서 import를 덜 할 수 있게 함
최적화되지 않은 코드 (최대한 작아진게 아니다)	코드를 최적화(작게) 하여 적은 코드를 다운로드할 수 있게 함
추가 개발 서버 필요 (여기서는 lite-server 사용)	개발 서버 쉽게 추가 가능

 

웹팩 (Webpack)

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다.
파일을 묶고(bundling) 빌드하고(building), 종합하는(orchestration) 도구로 코드를 묶음으로써 HTTP 요청의 양을 줄이는 것을 도와준다.

• 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다.
• 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다.
• 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다.

 

설치방법

$ npm install webpack webpack-cli --save-dev

// 유데미 강의에서 설치한 코드
$ npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

 

// package.json

"devDependencies": {
    "lite-server": "^2.5.4",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.5",
    "webpack": "^5.76.1",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }

ts-loader | 웹팩에게 어떻게 코드를 자바스크립트로 변환할 것인지를 전달한다. 웹팩은 ts-loader의 도움을 받아 코드를 컴파일하고 (후드(hood) 하에서 컴파일러의 타입(type)을 사용함), 자바스크립트 파일을 1개의 묶인 bundle 코드 파일로 묶을 수 있게 된다.

typescript | 프로젝트마다 타입스크립트의 사본을 설치하는 게 글로벌로 설치하는 것보다 좋은 관행이다.
만약 타입스크립트 자체에 큰 변경사항이 있는 경우, 프로젝트를 위한 특정 버전의 타입스크립트로 고정되어 있다면 글로벌 버전과 충돌하지 않기 때문이다.

webpack | 코드를 묶고 변환하기 위한 특정 기능을 플러그인 하도록 해준다
webpack-cli | 프로젝트에서 웹팩 명령어를 실행하기 위해
webpack-dev-server | 개발 서버 내에서 빌트하기 위해서. 파일의 변경사항을 점검하고, 무언가 변경이 생겼을 때 웹페이지의 재컴파일을 시작한다.

 

웹팩이 필요한 정보.
1. 시작 지점(entry point) ex.) app.ts 등
2. 시작 지점 파일 내의 import 파악
3. ts-loader의 도움을 받아 파일 내용(contents) 파악

★ES 모듈을 사용했을 때는 import 경로에 .js 확장자를 붙였는데, 웹팩을 정확하게 동작시키기 위해서는 모든 import에서 .js 확장자를 삭제해야한다.

 

 

 

Entry(엔트리)
Output(출력)
Loaders(로더)
Plugins(플러그인)
Mode(모드)
Browser Compatibility(브라우저 호환성)

 

 

webpack dev server

매번 코드가 바뀔 때마다 npm run dev + 브라우저 새로고침을 하기에는 번거롭다. webpack dev server는 코드 변경을 자동으로 감지해서 웹팩을 자동으로 실행시켜주는데 웹팩을 실행한 결과 파일이 만들어지면 브라우저를 자동으로 리로드 해준다.

 

개발모드가 아닌 배포모드용 webpack.config.prod.js 파일 만들기

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

프로젝트를 다시 빌드할 때마다 dist 폴더를 지우고 최신 상태를 유지하게 하는 것

 

webpack.config.prod.js

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

module.exports = {
  mode: "production",
  entry: "./src/app.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  devtool: "none",
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
  plugins: [new CleanPlugin.CleanWebpackPlugin()],
};

 

웹팩5로 버전 업그레이드가 되면서 package.json script에 webpack-dev-server가 아니가 webpack serve라 쓰고, config 파일에 devServer 설정을 추가해 주어야 한다.

그리고 실행을 했는데... 계속 오류가 나서... 아마 강의랑 지금 버전 차이 문제인 것 같은데 해결 방법을 계속 찾아보고는 있지만 쉽지가 않다..🫠 언제쯤 해결할 수 있을까... prod 버전도 되질 않아서 뭘 참고해서 에러를 해결해야 하는지.. 정말 모르겠음... 다른 웹팩 강의들 이것저것 다 보고 있는데 다.. 안된다...