webpack

webpack

webpack 설정

entry : {
  웹팩을 실행할 대상 파일, 그 진입점과 경로 정의. 
  보통 웹 애플리케이션의 전반적인구조와 내용이 들어있어 있는 메인 JS 파일을 지정한다. 
}, 
output : {
  웹팩을 실행 후 결과물의 파일 경로 — filename과 path 설정한다.
},
loader : {
  loader는 특정 파일을 해석하고 변환하는 작업 담당이다. 
  즉 HTML, CSS, 이미지나, font 같은 asset 파일들을 웹팩이 인식하고 할 수 있도록 해주는 것을 
  loader가 맡아서 해준다.
  
  test: 로더를 적용할 “파일 유형” (CSS, JS..등등)
  use: 로더 이름
  
  * 많이 쓰이는 로더 종류와 인스톨 방법
  files: npm install file-loader -D
  CSS: npm i css-loader -D
  SASS: npm i sass-loader sass -D
  Babel: npm install babel-loader @babel/core @babel/preset-env -D
  TypeScript: npm i typescript ts-loader -D
},
plugins : {
  웹팩 실행시 원하는 추가적인 기능을 추가 할 수 있는 옵션이다.
 
  * 자주 사용하는 플러그인
  html-webpack-plugin
  clean-webpack-plugin
  image-webpack-loader
  webpack-bundle-analyzer-plugin

}

html-webpack-plugin

src의 index.html template로 /dist/index.html를 만들어낸다.

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
        }),
    ],

• devServer
• devtool
• HMR(Hot Module Replacement)
  HMR를 통해 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영
• 소스 맵(Source Map)
  성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축하여 배포하는 관계로, 배포 후 에러 생성 시 디버깅이 힘들다. 이 문제의 도움을 주는 것이 Source Map이다. Source Map을 사용함으로써 배포된 빌드 파일과 원본 파일을 연결 추적이 가능하다.
• Mode
  웹팩 실행 모드에는 세가지 종류가있다: none, development, production
  development: 개발 모드
  production: 배포 모드; 성능 최적화를 위해 기본적인 파일 압축 등의 빌드 과정이 추가된다.

** 출처
https://www.hanl.tech/blog/webpack-%ec%82%ac%ec%9a%a9%eb%b0%a9%eb%b2%95%ea%b3%bc-%ea%b8%b0%eb%8a%a5-%ec%9a%94%ec%a0%90-%ec%a0%95%eb%a6%ac/