[React] typescript 프로젝트에 webpack 적용하기

create-react-app 으로 만든 typescript 프로젝트에 webpack 적용하기

필요한 패키지 설치

npm i -D file-loader ts-loader
npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-server
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
npm i -D typescript @babel/preset-typescript ts-loader fork-ts-checker-webpack-plugin
npm i -D rimraf

webpack 관련 패키지

• webpack: Webpack(웹팩) 라이브러리
• webpack-cli: Webpack(웹팩)을 명령어로 조작하기 위한 라이브러리
• html-webpack-plugin: Webpack(웹팩)에서 HTML을 다루기 위한 플러그인
• webpack-dev-server: Webpack(웹팩)으로 로컬에서 개발하기 위한 테스트 서버

babel 관련 패키지

• babel-loader: Webpack(웹팩)에서 babel(바벨)을 다루기 위한 라이브러리
• @babel/core: babel(바벨)로 컴파일하기 위한 라이브러리
• @babel/preset-env: babel(바벨)로 컴파일시 어떤 타겟으로 지정할지 설정하는 라이브러리
• @babel/preset-react: React(리액트)를 babel(바벨)로 컴파일하기 위한 라이브러리

typescript 관련 패키지

• typescript: Typescript(타입스크립트) 필수 라이브러리
• @babel/preset-typescript: babel(바벨)에서 Typescript(타입스크립트)를 빌드하기 위해 필료한 라이브러리
• ts-loader: Webpack(웹팩)에서 Typescript(타입스크립트)를 컴파일 하기 위해 필요한 라이브러리
• fork-ts-checker-webpack-plugin: ts-loader의 성능을 향상시키기 위한 라이브러리

os관련 패키지

• rimraf: Mac과 윈도우즈에서 동일한 명령어로 폴더를 삭제하기 위한 라이브러리

 

webpack 설정하기

webpack.config.js 파일을 생성해 아래 내용을 작성합니다.

const path = require('path'); //절대경로를 참조하기 위해 path를 불러오기

const HtmlWebpackPlugin = require('html-webpack-plugin'); //웹팩에서 HTML을 다루기위한 플로그인을 불러오기

// Typescript(타입스크립트)를 빌드할 때 성능을 향상시키기 위한 플러그인를 불러오기
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
    // 번들 파일로 만들기 위한 시작 파일(entry)을 설정
    //생성될 번들 파일은 js 폴더 하위에 app.js라는 이름으로 생성
    //이 파일은 ./src/index.tsx를 시작으로 번들링(하나로 합치기)합니다.
    entry: {
        'js/app': ['./src/index.tsx'],
    },

    //생성된 번들 파일(bundle)은 ./build/ 폴더에 생성
    //publicPath를 지정함으로써 HTML등 다른 파일에서 생성된 번들을 참조할 때, /을 기준으로 참조
    output: {
        path: path.resolve(__dirname, 'build/'),
        publicPath: '/',
    },

    //React(리액트) 파일인 jsx와 js는 babel(바벨)을 이용하여 빌드
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                        },
                    },
                ],
            }
        ],
    },

    //./src/index.html 파일을 build 경로에 index.html로 파일을 생성
    //파일을 생성할 때, Webpack(웹팩)이 만든 번들 파일(/js/app.js)를 HTML에 추가하여 생성
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            filename: 'index.html',
            favicon: 'public/favicon.ico'
        }),
        new ForkTsCheckerWebpackPlugin(),
    ],
    resolve: {
        modules: [path.resolve(__dirname, './src'), 'node_modules'],
        extensions: ['.ts', '.tsx', '.js', '.json', '.css'],
        alias: {
            src: path.resolve(__dirname, './src'),
            components: path.resolve(__dirname, './src/components')
        }
    }
};

 

tsconfig.json 설정하기

루트 디렉토리에 tsconfig.json 파일을 아래와 같이 수정합니다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "noResolve": false,
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "keyofStringsOnly": true,
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"]
    }
  },
  "typeRoots": [
    "node_modules/@types",
    "src/@type"
  ],
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "./node_modules/**/*"
  ],
  "include": [
    "./src/**/*",
    "@type"
  ]
}

아래 코드는 alias 설정을 위한 코드입니다.

alias에서 에러가 난다면 tsconfig.json에서 baseUrl과 paths 설정을 했는지 확인해보세요!

"baseUrl": ".",
"paths": {
    "*": ["src/*"]
}

 

babel 설정하기

루트 디렉토리에 .babelrc 파일을 생성하고 아래와 같이 작성합니다.

{
  "presets": [
    [
      "@babel/preset-env",
      { "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
    ],
    "@babel/react",
    "@babel/typescript" // Typescript(타입스크립트)가 컴파일 가능하도록 추가
  ]
}

 

package.json 실행명령어 수정하기

package.json에서 scripts를 아래와 같이 수정합니다.

 

  "scripts": {
    "start": "webpack serve --mode development --open",
    "prebuild": "rimraf build",
    "build": "webpack --progress --mode production"
  },

• "start": "webpack server --mode development --open": npm start 또는 npm run start로 실행되는 스크립트입니다. Webpack(웹팩)의 개발 서버를 development 모드로 실행시킵니다. Webpack(웹팩)을 실행시킬 때는 항상 모드(development 또는 production)를 설정해야합니다. --open 옵션은 실행 후 바로 해당 페이지를 열어주기위해 사용합니다.
• "prebuild": "rimraf build": npm run build로 build 스크립트를 실행하면 build 스크립트전에 이 스크립트가 실행됩니다. pre와 post로 스크립트 실행전, 실행후 실행시키고 싶은 스크립트를 실행시킬 수 있습니다. 저는 빌드후 생성되는 폴더를 지우고 다시 만들기 위해 사용하고 있습니다.
• "build": "webpack --progress --mode production": npm run build로 실행되는 스크립트입니다. Webpack(웹팩)을 production 모드로 실행시켜 번들링(bundling)합니다. –progress은 빌드 진행 과정을 모니터링하기 위한 옵션입니다.

 

실행하기

npm start
npm run build

npm start 를 실행하면 브라우저에서 http://localhost:8080/이 오픈됩니다.

 

npm run build 로 지정된 폴더(build)에 프로젝트를 빌드할 수 있습니다. 

 

참고

설명을 너무 잘 정리해주셔서 쉽게 설정할 수 있었습니다.

아래 블로그도 꼭 한번 읽어보시길 바래요!

Webpack으로 React 프로젝트 만들어보기(❌CRA)

Webpack으로 만든 React 프로젝트에 Typescript 환경 설정하기(❌CRA)

Webpack, React, Typescript, Jest 환경에서 Alias 적용하기 (절대 경로 import)