웹팩

웹팩을 사용하는 이유?

웹페이지는 많은 구성요소로 이루어져있다. html, js, css 이외에도 이미지, 폰트 등등 다양한 파일을 받아와야 한다. 그런덴 http 요청은 비효율적으로 데이터 하나가 전송이 다 끝나고 나면 다음 요청을 보내기 때문에 요청이 많을 수록 비효율적이다. 따라서 요청의 수를 줄이는 것이 좋은데 모든 파일을 번들링해서 하나로 만들어주는 것이 웹팩의 첫번째 목적이다.

또한 JS 패키지간의 의존성을 프로젝트 내에 주입하는 것이 프로젝트를 관리하는데에 있어서 더 장점이 있는데 import/export 혹은 import/require를 사용해서 모듈별로 파일을 관리하고 나중에 하나로 묶어주는 역할을 하는 것이 웹팩의 두번째 목적이다.

entry

서로 의존하는 모듈들의 시작점을 entry라고 한다.

entry: {
    app: ['a.js', 'b.js'],
  },

js 파일 대신 npm 모듈들을 넣어도 된다. @babel/polyfill을 적용할 때 많이 사용한다.

entry: {
    vendor: ['@babel/polyfill', 'eventsource-polyfill', 'react', 'react-dom'],
    app: ['@babel/polyfill', 'eventsource-polyfill', './client.js'],
  },

이렇게 하면 각 entry가 polyfill들이 적용된 상태로 output에 나온다.

output

entry를 시작으로 의존되어 있는 모듈들을 하나로 묶은 결과물을 출력할 위치를 말한다.

• path: output으로 나올 파일이 저장될 경로
• filename: output에 나오는 파일 이름
• publicPath: 정적 파일 경로

loader

웹팩을 javascript만 알기 때문에 javascript 이외의 다른 파일들을 모듈로 관리하기 위해서 웹팩이 이해하도록 변경하는 역할을 하는 것이 loader이다.

로더는 test, use로 구성된다.

• test: 로딩할 파일을 지정
• use: 적용할 로더를 설정

babel-loader와 @babel/core

바벨의 필수 요소

@babel/preset-env

브라우저에 필요한 ECMAScript 버전을 자동으로 파악해서 polyfill을 넣어준다.

• target: 지원하는 환경
• modules: 'false': import 되지 않은 모듈들을 정리해준다.

@babel/preset-react

리액트에서 사용

@babel/preset-typescript

타입스크립트를 쓸 때 사용

devtool

웹팩을 사용해서 번들링을 하면 실제로 브라우저에서 실행되는 것은 번들링된 파일이다. 그런데 우리가 개발자 도구에서 오류의 위치를 볼 때 우리가 실제로 보고 싶은 것은 우리가 작성한 코드의 어디에서 에러가 발생했는지이다. 번들링된 파일에서 실제로 작성한 코드와 직접 mapping 해주는 역할을 한다.

webpack.sourceMapDevToolPlugin

new webpack.SourceMapDevToolPlugin({
  exclude: [/node_modules/],
  test: /\.(ts|tsx)/i,
}),