Webpack을 통한 build

우테코 레벨3가 시작된 지도 벌써 6주차에 접어들건만, 이제야 2주차에 했던 웹팩 빌드에 대한 글을 쓰네요. 

 

프로젝트 빌드라고는 CRA로밖에 못했던 저이기 때문에 웹팩으로 프로젝트 빌드를 해야 하다는 청천벽력 같은 소리를 듣고 호다닥 공부를 해야만 했습니다.

 

주저리 주저리 떠들어댔지만, 결국 이 글을 쓰는 목적은 순전히 제가 다시 보기 위함이기 때문에, 웹팩 빌드에 대한 뭔가 프로페셔널하고 딥한 글을 원하셨던 분은 귀중한 시간을 다른 곳에 쓰셨으면 좋겠네요😄

 

저희 조는 패키지 매니저로 yarn을 선택했는데요.

 

NPM이 패키지를 순차적으로 설치하는 동안 yarn은 병렬 설치를 수행하여 더 나은 속도와 성능을 제공한다고 합니다.

https://www.knowledgehut.com/blog/web-development/yarn-vs-npm

 

1.  프로젝트에 필요한 라이브러리 설치

# 프로젝트 초기화 & package.json 생성
yarn init -y	

# dependencies에 react, react-dom 라이브러리 추가
yarn add react react-dom	

# '-D' 프로젝트 배포에는 필요없는 라이브러리들을 devDependencies에 설치
yarn add -D typescript @types/react @types/react-dom

# tsconfig.json 생성
yarn tsc --init

이외에도 필요한 라이브러리들을 설치해줍니다.

 

2. 웹팩 관련 플러그인 설치

# webpack: 모듈 번들러로서, 여러 파일들을 하나로 번들링하고 최적화하는 도구
# webpack-cli: 웹팩을 커맨드 라인에서 사용하기 위한 도구
yarn add -D webpack webpack-cli


# html-webpack-plugin: 빌드 시 HTML 파일을 자동으로 생성하고 번들링된 파일을 자동으로 연결해주는 플러그인
# webpack-dev-server: 개발 서버 실행 중 코드 변경 시 빌드 자동 수행 및 브라우저 자동 새로고침으로 개발 화면 확인
# ts-loader: 웹팩에서 TypeScript 소스 코드를 JavaScript로 변환하는 역할 수행.
yarn add -D html-webpack-plugin webpack-dev-server ts-loader

 

3. webpack config 파일을 정의

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const dotenv = require('dotenv');
dotenv.config();

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    /* react-router-dom outlet을 적용할 때,
    children page들이 라우팅 되지 않는 문제를 publicPath:'/'로 작성하여 해결함. */
    publicPath: '/', 
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/i,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
          options: {
            compilerOptions: { noEmit: false },
          },
        },
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    // webpack 빌드 시 환경변수 파일(.env)을 인식하지 못하는 경우 아래 코드의 존재 여부 확인
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env),
    }),
  ],
  devtool: 'inline-source-map',
};

 

webpack.dev.js

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devtool: "eval",
  devServer: {
    historyApiFallback: true,
    port: 3000,
    hot: true,
  },
});

• 개발 환경에서는 빠른 빌드와 디버깅을 위해 development 모드를 사용합니다.
• devtool의 'eval' 소스 맵을 사용하면 빠른 빌드를 할 수 있게 됩니다. 
• devServer의 historyApiFallback: true는 라우팅 지원을 위한 옵션입니다. port:3000는 개발 서버가 동작할 포트, hot: true는 핫 모듈 리로딩(Hot Module Replacement)을 활성화합니다.

 

webpack.prod.js

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "production",
  devtool: "hidden-source-map",
});

• production 모드에서는 코드 최적화를 적용하여 배포용 번들을 생성합니다.
• 프로덕션 환경에서는 devtool의 'hidden-source-map'을 통해 디버깅 정보를 감추면서, 소스 맵을 사용하여 에러가 발생했을 때 원본 소스 코드를 추적할 수 있습니다.

1.  

저희 팀은 webpack.config.js를 이렇게 세 가지로 분리하였습니다.

공통되는 부분은 common, 개발 환경에서 사용하는 부분은 dev, 실제 프로덕션 배포에는 prod를 사용합니다. 이를 통하여 개발 환경과 프로덕션 환경에서 각각 최적화된 설정을 사용하여 웹팩 빌드를 사용할 수 있게 됐습니다.

 

 

4. script

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.dev.js --open --hot",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack --config webpack.dev.js"
  },

마지막으로 package.json의 script 부분을 수정하여 지금까지 작성한 웹팩 설정들을 사용할 수 있게 되었습니다!😄

 

이상 저희 팀의 웹팩 빌드 과정을 읽어주셔서 감사합니다🙇‍♂️