[Webpack] Parcel에서 Webpack로 변경

Vanilla JS로 To-do list 수정 구현하기 까지만 마무리할 건 아니었고, 최근에 이 프로젝트를 다시 만지작거릴 때부터 Webpack 이랑 TS 적용해봐야지 생각했다. Webpack을 적용시키면서 예기치 못했던 에러들을 해결하는데 시간이 꽤 걸렸고, 마무리하는데 시간이 길어졌다. 아래는 그 내용을 담아본다!

🐾Parcel 에서 Webpack 로

npm uninstall parcel
npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env css-loader html-webpack-plugin source-map-loader style-loader webpack webpack-cli webpack-dev-server

parcel을 걷어내고 webpack을 사용하기 위한 여러 라이브러리 또는 패키지들을 설치했다. 설치하면서 하나하나 왜 필요한지 알게 됐고, 번들러에 대한 좀 더 많이 알게 됐다.

* @babel/cli: Babel 컴파일러를 명령 줄에서 실행
* @babel/core: Babel의 핵심 기능을 제공
* @babel/preset-env: Babel의 프리셋 중 하나로, 현재 환경에 필요한 트랜스파일링을 수행
* babel-loader: Webpack에서 Babel을 사용하기 위한 로더
* clean-webpack-plugin: Webpack 빌드 시 이전 빌드 결과물을 자동으로 정리해주는 플러그인
* copy-webpack-plugin: Webpack 빌드 시 특정한 디렉터리나 파일을 복사해 번들링 된 폴더 내에 경로로 삽입하는 플러그인
* core-js: ES6+ 기능을 사용하기 위한 폴리필 제공하는 라이브러리
* cross-env: 여러 플랫폼에서 환경 변수를 설정
* css-loader: CSS 파일을 로드하고 웹팩에서 사용할 수 있도록 해주는 로더
* html-webpack-plugin: HTML 파일을 생성하고 웹팩 번들을 자동으로 삽입해주는 플러그인
* source-map-loader: 소스 맵 파일을 로드하여 디버깅에 도움을 주는 웹팩 로더
* style-loader: 스타일 시트를 동적으로 DOM에 삽입해주는 로더
* webpack: 모듈 번들링 도구
* webpack-cli: 웹팩 명령줄 인터페이스를 제공
* webpack-dev-server: 개발 서버를 실행하여 변경 사항을 실시간으로 반영

🐾Webpack config 설정

라이브러리 및 패키지를 설치만 하면 동작하지 않는다. webpack.config.js에서 여러가지 설정을 해줘야 한다. webpack 공식문서 한국어를 보고 프로젝트 특성에 맞게 설정할 수 있다.

📌진입점과 결과물 출력 설정

entry: {
    main: './src/main.js',
  },
  output: {
    path: path.resolve('./dist'),
    filename: '[name].min.js',
  },

• entry : 진입점 설정, 이 파일을 기반으로 웹팩은 의존성 그래프(dependency graph)를 생성하고 모든 종속 모듈을 포함한 번들된 결과물을 생성
• output : 웹팩 번들링 결과물의 출력 설정을 지정
  • path : 번들된 파일이 저장될 디렉토리 경로를 설정
  • filename : 번들된 파일의 이름을 설정

📌개발 서버 관련 설정

devServer: {
    liveReload: true,
  },

파일 변경시 자동으로 페이지를 다시 로드할지 설정

📌번들 최적화 관련 설정

optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
    splitChunks: {
      chunks: 'all',
    },
  },

• TerserPlugin : 웹팩이 생성한 번들된 JavaScript 파일의 크기를 최소화
  • drop_console: true : 압축 시 콘솔(console) 로그를 제거
• splitChunks : 중복되는 코드를 줄이고 파일 크기를 최적화

📌모듈 해석 및 처리 방식 설정

 module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        enforce: 'pre',
        use: 'source-map-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
    ],
  },

• rules: 모듈을 처리하는 규칙(rule)을 설정하는 배열
  • test 에 적힌 확장자를 가진 파일을 use에 적힌 것으로 해석하고 처리함
  • enforce: 'pre : 강제로 다른 로더보다 먼저 실행
  • exclude: /node_modules/ : 파일 처리할 때 node_modules 제외

📌플러그인 설정

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify:
        process.env.NODE_ENV === 'production'
          ? {
              collapseWhitespace: true,
              removeComments: true,
            }
          : false,
    }),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        { from: './src/css/main.css', to: './main.css' },
        { from: './src/images', to: './images' },
      ],
    }),
  ],

• HtmlWebpackPlugin : HTML 파일을 생성하는 플러그인
• CleanWebpackPlugin : 빌드 과정에서 이전에 생성된 파일들을 제거하고, 새로운 파일들을 생성
• CopyWebpackPlugin : 파일 복사를 수행하는 플러그인

🐾babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', 
      { targets: { chrome: '58', ie: '11' } }
    ],
  ],
};

• targets 객체를 사용하여 변환 대상 브라우저 및 버전을 설정