webpack 5 업그레이드 하면서 새로 알게된 내용

webpack

webpack 5 업그레이드 하면서 새로 알게된 내용

chanto11

2021. 2. 16. 21:29

1. webpack-dev-server

webpack 5부터 webpack-dev-server 실행 명령어가 바뀌었습니다.

이전 명령어 실행 시 Error: Cannot find module 'webpack-dev-server/bin/cli-flags' 에러가 발생한다.

기존 명령어 : ~~webpack-dev-server (--hot)~~
새로운 명령어 : webpack serve (--hot)

devServer의 dev옵션을 true로 하면 --hot 옵션만 이용한다는 뜻이다.

devServer: {
    port: 8080,
    contentBase: path.join(__dirname, 'public'),
    // webpack serve --hot = only
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
      },
    },
  },

2. core-js@3 버전 사용하여 polyfill 대체하기

// 설치하기 - 런타임 환경에서 동작해야하기 때문에 dev가 아닌 환경에 설치
npm install core-js regenerator-runtime

이전에는 .babelrc 에서 바벨 설정을 해주고 include 시켜줘야 했지만 이제는 webpack내부 옵션으로 지원한다고 한다.

useBuiltIns : 'usage' 를 사용하면 전역에 corejs와 regenerator를 선언해주지 않아도되고 소스에 사용된 것만 폴리필을 자동으로 넣어줘서 'usage' 옵션을 쓰는것을 추천한다고 한다.

[
    '@babel/preset-env',
    {
        targets: {
          browsers: ['last 2 versions', 'ie >= 11'],
        },
        debug: true,
        modules: false,
        // useBuiltIns : [entry(target에 맞춰서), usage(사용된것만), false]
        useBuiltIns: 'usage',
        // core-js@3 버전을 사용
        corejs: 3,
    },
 ],

3. modules 옵션 - 트리 쉐이킹

번외 - 자바스크립트 성능 개선을 위해서 코드 스플리팅(Code Splitting)은 자바스크립트를 청크 단위로 app을 분할하고, 청크를 필요로 하는 app의 경로에만 이 청크들을 배분하여 성능을 개선하는 기술이다. 그러나 이 기술을 사용하여도 사용되지 않는 코드를 줄이기 위해서 트리 쉐이킹이 사용된다.

트리 쉐이킹이란 애플리케이션의 트리구조에서 각 노드들은 특정 기능을 제공하는 디펜던시(의존성)를 가지고 있고 최신 모듈 시스템에서는 import 구문을 통해 정적 모듈의 특정 부분을 가져오는 이점을 사용해 문제를 해결하는 것이다.

import { useState, useCallback } from 'react';

다시 말해 최신 모듈 시스템을 유지시켜서 전체 모듈이 포함되는 것을 방지하고 최신 모듈 시스템을 사용하여

모듈의 특정부분만 가져오기 때문에 import 되지 않은 export를 "떨어 버리기(shake)" 위해서 webpack을 설정하고 빌드 결과물 크기를 더 작게 만들 수 있다.

[
    '@babel/preset-env',
    {
        targets: {
          browsers: ['last 2 versions', 'ie >= 11'],
        },
        debug: true,
        // modules: false 트리쉐이킹 사용
        modules: false,
        useBuiltIns: 'usage',
        corejs: 3,
    },
 ],

4. include 와 exclude로 퍼포먼스 향상하기

적절하게 exclude와 include를 설정해주면 지정된 범위의 자원만 사용하기 때문에 퍼포먼스 향상에 도움이 된다. (권장)

...
...
test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        // 적절하게 범위를 지정해주면 퍼포먼스에 도움이 된다.
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
...
...

annyhpk.log