[Webpack] devServer option 정리

2021.06.25 - [Frontend/Webpack] - [Webpack] webpack option 정리

[Webpack] webpack option 정리

공식홈페이지를 많이 참고해서 정리하였으나, 지나가시는 분 중 제 설명에 틀린 점이 있다면 편하게 지적 부탁드립니다 :)

---

clientLogLevel

• inline 모드를 사용할 때 DevTools 콘솔에서 표시될 lovel (df. info)
• webpack6 이후부터는 제거될 옵션이라고 안내하고 있음.

clientLogLevel: 'warning'

 

historyApiFallback

• History API 또는 react-router 등을 사용하는 경우 새로고침 시 404 에러를 해결해주는 option
  
  • rewrites
    • from
    • to

// case1
historyApiFallback: true

// case2
historyApiFallback: {
  rewrites: [
    {
      from: /.*/,
      to: path.posix.join(config.dev.assertsPublicPath, 'index.html')
    }
  ]
}

 

hot

• HMR(Hot Module Replace) 기능 활성화 여부
• HMR : 내용이 변경된 모듈을 페이지 새로고침 없이 런타임에서 업데이트하고, 업데이트에 실패할 경우 새로고침을 수행

clientLogLevel: 'warning'

 

contentBase

• 번들링된 자원을 서비스 할 위치를 지정
• `CopyWebpackPlugin` 을 사용하면 필요하지 않기에 비활성화 시키면 된다.

contentBase: false

 

compress

• 제공되는 모든 항목에 gzip 압축 사용여부

comporess: true

 

open

• 서버가 시작되면 브라우저를 열도록 하는 option (df. true)

open: true

 

overlay

• 컴파일러 오류 또는 경고가 있을 때 브라우저 전체 화면에 오버레이를 표시하는 옵션 (df. false)
  
  • warnings
  • errors

// case1
overlay: false

// case2
overlay: {
  warnings: false,
  errors: true
}

 

publicPath

• devServer 에서는 번들링된 결과물을 메모리에 저장하므로 별도의 선언이 필요하고, 보통 ouput 에 적어준 publicPath 와 동일하게 선언하면 된다.

publicPath: config.dev.assertsPublicPath

 

proxy

• proxy 를 띄워서 브라우저->서버가 아닌 서버->서버로 요청을 보내는 option
• 이 설정으로 CORS 에러를 피할 수 있다.
  • target
  • changeOrigin

proxy: {
  '/api/' : {
    target: '내 서버 주소',
    changeOrigin: true
   }
}

 

quiet

• 초기 시작 정보 외에 콘솔에 아무것도 기록하지 않는 opton
• `FriendlyErrorsPlugin` 을 사용하면 필요하지 않기에 비활성화를 시켜준다.

quiet: true

 

watchOptions

• 웹팩은 파일 시스템을 사용해서 파일 변경 사항을 알리는데, NFS(Network File System) 을 사용하는 경우 작동하지 않는 경우가 있어서 polling 을 사용한다.
  • poll

watchOptions: {
  poll: true
}