[RTK] Typescript todoList 만들기 (6) - webpack 적용해보기

[RTK] Typescript todoList 만들기 (6) - webpack 적용해보기

 

webpack?

 

웹팩은 여러 가지 자원(.html ,.css,.js )의 파일을 단 하나의. js 파일로 모듈 번들링 시켜주는 도구이다.

내가 적용한 TodoApp에 webpack을 적용시켜보겠다.

 

아래는 웹팩 공식 문서 사이트 링크이다.

https://webpack.js.org/

webpack

 

 

웹팩 공식문서와 이전에 내가 작성했던 글을 참고하여, 나의 프로젝트의 적용해보겠다.

2022.10.20 - [개발/Typescript] - [Typescirpt] Typescirpt + react + webpack 설정하기

---

1. webpack 패키지를 설치한다.

 

다음의 명령어로 webpack과 webpack-cli를 설치해준다.

npm install --save-dev webpack webpack-cli

- webpack-cli : CLI(Command Line Interface)는 빌드를 구성하고 상호작용하는 데 사용된다. 설치하면 커맨드를 실행하여 사용할 수 있다. 

 

 

---

2. ts-loader, source-map-loader 추가

 

npm install --save-dev typescript ts-loader source-map-loader

이 두 패키지는 typescript와 webpack을 같이 사용할 수 있게 해 준다.

 

- ts-loader : tsconfig.json을 사용하여 컴파일할 수 있도록 도와줌

- source-map-loader :  Typescript의 소스 맵 출력을 사용해 고유한 소스 맵을 생성하게 될 때 Webpack에 알리게 된다.

이렇게 하면 기존의 TypeScript 소스코드를 디버깅하는 것처럼 최종 출력 파일을 디버깅할 수 있다.

 

 

---

3. tsconfig.json 수정

 

tsconfig.json의 다음과 같은 내용을 추가해준다. 

기존에 있던 내용과 겹치는 내용이 있지만 주석을 하고 새로 추가해 주었다.

 

tsconfig.json

 

{
  "compilerOptions": {
    // "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    // "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    // "jsx": "react-jsx",

    // 추가
    "outDir": "./dist/",     /* 해당 디렉토리로 결과물을 보낸다.*/
    "sourceMap": true,       /* '.map' 파일 생성 여부. */
    "noImplicitAny": true,   /* 'any' 타입으로 구현된 표현식 혹은 정의 에러처리 여부 */
    "module": "commonjs",    /* 모듈을 위한 코드 생성 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "target": "es6",         /* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'. */
    "jsx": "react"           /* JSX 코드 생성 설정: 'preserve', 'react-native', 혹은 'react'. */
  },
  "include": [
    "src"
  ],
}

 

 

---

4. webpack.config.js 파일 작성

 

프로젝트 루트 경로에 webpack.config.js 파일을 만들고 작성한다.

기존 포스팅했던 코드를 그대로 가져와서 사용하겠다.

 

webpack.config.js

 

module.exports = {
    mode: "production",

    // Webpack의 출력물에서 디버깅을 하기위해 소스 맵을 허용합니다.
    devtool: "source-map",

    resolve: {
        // 확인 가능한 확장자로 '.ts' 와 '.tsx' 를 추가합니다.
        extensions: [".ts", ".tsx"]
    },

    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            // 모든 '.js' 출력 파일은 'source-map-loader'에서 다시 처리한 소스 맵이 있습니다.
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },

    // 경로가 다음 중 하나와 일치하는 모듈을 가져올 때,
    // 해당 전역 변수가 있다고 가정하고 사용합니다.
    // 브라우저가 빌드간에 라이브러리를 캐시 할 수 있도록
    // 모든 의존성을 묶지 않아도 되기 때문에 중요합니다.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

---

5. webpack 실행해보기

npx webpack

위의 명령어로 webpack을 실행해보자.

 

 

 

---

 

6. 실행 오류 잡기

 

나는 실행하였더니 다음과 같은 오류가 났다.

 

 

검색해보니 tsconfig.json 에서 "noEmit" 옵션을 false로 변경하라는 말이 있어서 변경하였더니 해당 오류는 사라졌다.

//tsconfig.json

//...
"noEmit": false, // 오류로 변경

 

하지만 무수한 다른 오류가 올라왔다. 이 오류들도 해결해보자.

 

 

가장 많은 오류는 mui에서 났고, module.css 파일에서도 났다.

 

css-loader를 설치해준다.

 

npm install --save-dev css-loader

 

webpack.config.js. 에 css에 해당하는 룰을 추가해준다.

 

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

 

. css 관련 오류는 사라졌다.

 

위 사진처럼 node_modules에서 파일을 계속 못 불러오는 경우가 존재하였는데,

 

wepack.config.js에서 

resolve > extension 설정에. js와. jsx를 추가해주었더니 빌드가 되었다.

module.exports = {
    mode: "production",

    // Webpack의 출력물에서 디버깅을 하기위해 소스 맵을 허용합니다.
    devtool: "source-map",

    resolve: {
        // 확인 가능한 확장자로 '.ts' 와 '.tsx' 를 추가합니다.
        // 여기 .js .jsx 추가
        extensions: [".ts", ".tsx", ".js", ".jsx"]
    },

    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader",
                    }
                ]
            },
            // 모든 '.js' 출력 파일은 'source-map-loader'에서 다시 처리한 소스 맵이 있습니다.
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ]
    },

    // 경로가 다음 중 하나와 일치하는 모듈을 가져올 때,
    // 해당 전역 변수가 있다고 가정하고 사용합니다.
    // 브라우저가 빌드간에 라이브러리를 캐시 할 수 있도록
    // 모든 의존성을 묶지 않아도 되기 때문에 중요합니다.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

 

오류를 제거하고 

 

npx webpack 명령어를 입력하면, 번들링 된 파일이 생성된다.

 

 

---

7. 번들된 main.js 열어보기

dist폴더에 index.html 파일을 만들고 다음과 같이 작성한다.

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Dependencies -->


    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

    <script src="./main.js"></script>
  </body>
</html>

 

중간에 삽입된 react.development.js 와 react-dom.devleopment.js 는 React 실행환경을 만들어주는 코드이고,

 

main.js를 스크립트로 추가한다.

 

VSCode 확장 프로그램인 Live Server를 이용해 실행했다

 

다음과 같이 빌드된 파일로 잘 구동되는 것을 확인할 수 있다.

 

---

이외에도 webpack 공식사이트에서는 많은 종류의 설정들을 지원한다.

Babel을 포함하여 여러가지 설정을 적용해보며 나만의 설정방식을 만들어야겠다.