프론트엔드 개발환경 - 웹팩(Webpack) 2

이지연·2022년 10월 4일
0
post-thumbnail

웹팩 개발 서버 (webpack-dev-server)

  • ajax 방식의 api 연동은 cors 정책 때문에 반드시 서버가 필요
  • 웹팩 개발 서버 : webpack-dev-server
  • devServer 기본 설정
    // webpack.config.js:
    module.exports = {
      devServer: {
        contentBase: path.join(__dirname, "dist"), // 정적파일을 제공할 경로. 기본값은 웹팩 아웃풋이다.
        publicPath: "/", // 브라우져를 통해 접근하는 경로. 기본값은 '/' 이다.
        host: "dev.domain.com",
        overlay: true, // 빌드시 에러나 경고를 브라우져 화면에 표시
        port: 8081, // 포트 설정
        stats: "errors-only", // 메세지 수준 설정
        historyApiFallback: true,
      },
    }

API 연동

  • 목업 API 1: devServer.setupMiddlewares (webpack5)
    • express.js의 app 객체를 가져올 수 있다
  • 목업 API 2: connect-api-mocker
    • 목업 api 작업이 많을 때 특정 목업 폴더를 만들어 api 응답을 담은 파일을 저장한 뒤, 이 폴더를 api로 제공
  • 목업 API 3: proxy
    • cors 문제를 해결하기 위해 proxy 설정을 사용

Hot Module Replacement (HMR)

  • 전체 화면 갱신 하지 않고 변경한 모듈만 바꿔치기 하는 기능
  • 핫로딩을 지원하는 로더
    1. style-loader
    2. react-hot-loader
    3. file-loader

webpack bundle 결과 최적화

production 모드

  • DefinePlugin을 사용한다면 process.env.NODE_ENV 값이 "development"로 설정되어 어플리케이션에 전역변수로 주입된다.
  • 반면 mode를 "production"으로 설정하면 자바스크립트 결과물을 최소화 하기 위해 다음 일곱 개 플러그인을 사용한다.
    • FlagDependencyUsagePlugin
    • FlagIncludedChunksPlugin
    • ModuleConcatenationPlugin
    • NoEmitOnErrorsPlugin
    • OccurrenceOrderPlugin
    • SideEffectsFlagPlugin
    • TerserPlugin
  • DefinePlugin을 사용한다면 process.env.NODE_ENV 값이 "production" 으로 설정되어 어플리케이션 전역변수로 들어간다.

optimazation 속성으로 최적화

  • css-minimizer-webpack-plugin : css 파일 압축
  • terser-webpack-plugin: console.log와 같은 코드 제거

Code Spliting 코드 스플리팅

  • SplitChunksPlugin : 코드를 분리할 때 중복되는 코드를 별도의 파일로 분리하여 관리해준다

Dynamic Import 다이나믹 임포트

  • axios와 같은 패키지는 패키지로 제공될때 이미 빌드 과정을 거쳤기 때문에 빌드 프로세스에서 제외하는 것이 좋다. 웹팩 설정중 externals 이용 할 수 있다.
  • axios는 이미 node_modules에 위치해 있기 때문에 이를 웹팩 아웃풋 폴더에 옮기고 index.html에서 로딩해야한다. 파일을 복사하는 CopyWebpackPlugin을 설치한다.
profile
dev log

0개의 댓글