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

웹팩 개발 서버 (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을 설치한다.