• webpack.config.js
  • entry 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로. 엔트리 포인트는 이름을 지정할 수 있고 여러개 만들 수도 있다. 엔트리 포인트를 분리하는 경우는 SPA가 아닌 특정 페이지로 진입했을 때 서버에서 해당 정보를 내려주는 형태의 MPA가 적합하다.
  • output 웹팩을 돌리고 난 결과물의 파일 경로와 파일 이름을 지정한다. 파일 이름에 해쉬를 붙이는 경우도 있으며, 경로는 절대경로로 지정한다.
  • devtool source map은 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능. 에러가 발생했을 때 번들링 된 파일에서 어느 부분에 에러가 났는지를 쉽게 확인할 수 없지만 source map을 이용하면 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 매핑되기 때문에 추적이 쉽다.
  • module 로더들은 module.rules 안에 객체 배열 형태로 추가된다. 특정 파일에 대해 여러 개의 로더를 사용하는 경우 로더는 기본적으로 오른쪽에서 왼쪽 순으로 적용된다. -> 어디말하노

    test : 로더를 적용할 파일 유형 (일반적으로 정규 표현식 사용)
    loader : 로더가 1개일 때 해당 파일에 적용할 로더
    use : 로더가 2개 이상일 때 해당 파일에 적용할 로더의 배열
    exclude : 로더를 제외할 대상

  • devServer : webpack-dev-server에 대한 설정

    hot : 모듈의 변화된 부분만 자동으로 리로딩하는 HMR(Hot Module Replacement) 기능을 사용할 것인지에 대한 옵션
    overlay : 에러가 발생했을 때 브라우저에 띄울 것인지 여부
    writeToDisk : 메모리 뿐만 아니라 직접 파일로 만들 것인지에 대한 옵션

  • plugins 배열로 넣는다. 여기서 HtmlWebpackPlugin에 전달한 template 객체에는 번들링 파일을 주입할 대상 HTML 파일을 명시한다.

package.json

• main은 이 프로그램의 시작점
• files는 .gitignore 파일과 비슷한 형태로 작동하는데, 역할은 반대로 압축될 때 tarball(.tar) 파일에 포함되도록 하는 기능

peerDependencies를 갖고 있다는 것은 어떤 사람이 자신 프로젝트에 당신의 패키지를 설치할 때 , 완전히 똑같은 dependencies를 갖고 있다는 것을 의미.

  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }

"clean": "rimraf dist",
"compile": "npm run clean && cross-env NODE_ENV=production babel src/components --out-dir dist --copy-files"

Babel을 통해서 컴포넌트를 컴파일하고, 그 결과물을 이후 dist 디렉토리에 복사하고, 기존의 dist 폴더의 내용을 지우는 컴파일 스크립트