webpack guide 정리

webpack 공식문서에서 guide를 보며 정리해야할 것들을 기록으로 남기려합니다. 삽질하고, 헷갈리고, 중요 컨셉을 중점적으로 정리해보겠습니다.

Asset Management

이미지나 폰트같은 자원들은 웹팩에 내장되어있는 로더를 사용합니다.

{
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      }

로더를 정의하는 부분에서 type 을 정의해주는데요. asset/resource는 웹팩의 내장 로더인 file-loader를 사용하겠다는 것입니다.

file-loader는 자원들을 output 파일에 생성하며 자원의 url을 export시켜서 다른 모듈에서 사용할 수 있도록 합니다.

> @font-face 삽질

웹 폰트를 사용하기 위해 보통 @font-face를 사용하는데 .ttf로 끝나는 확장자의 경우 format함수에 truetype으로 넣어줘야합니다. 저는 계속 ttf를 넣는 실수를 해서 삽질을 했습니다.

@font-face {
  font-family: "MyFont";
  src: url("./Stick-Regular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

Output Manegement

> manifest란?

웹팩은 어떻게 기존의 파일에서 어떤 파일이 생성이 되었고, 또 이를 어떻게 정확하게 번들링할 수 있는걸까요. 해답은 manifest파일에 있습니다. 그 모든 정보가 이 파일에 담겨있죠. 지금은 이렇게만 이해하고 넘어가도록 하겠습니다.

Development

> publicPath란?

웹팩을 공부하는 많은 분들이 처음에 publicPath와 path의 차이를 헷갈리실 거라고 생각합니다. 저도 그랬고, 이제는 조금 이해했는데 저의 설명이 조금이나마 도움이 되었으면 좋겠네요.

먼저 output.path는 우리가 번들링한 파일을 다음 디렉토리 경로입니다. output.publicPath는 webpack-dev-server를 실행했을때 outputh.path에 있는 번들링된 파일들을 serve할 경로를 지정하는 것입니다. 예를 들어보죠.

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    publicPath: "/dist/",
  },
devServer: {
    contentBase: "./dist",
  },

위와 같이 웹팩 설정을 했다고 하죠. 참고로 contentBase 프로퍼티는 serve할 파일의 경로를 설정해서 webpack-dev-server가 "아, 여기에 있는 파일들을 유저한테 보여주면 되는구나!" 라고 이해시키는 것입니다.

다시 돌아와서, publicPath: "/dist/"로 설정이 되어있죠?

이는 "자, webpack-dev-server야! 내가 소스코드를 빌드하면 ./dist라는 경로(output.path)에 빌드된 파일을 넣어둘게 그럼 넌 이 경로에 있는 파일들을 serve하고(devServer.contentBase) 브라우저에서 유저가 /dist/라는 경로로 들어올때(output.publicPath) 이를 보여주면 돼!"

즉, 한마디로 publicPath는 번들링된 결과를 보여주는 라우트를 설정하는 것과 같다고 보시면 됩니다. 조금 이해가 되셨나요?

Code Splitting

> runtimeChunk

runtimeChunk를 이해해봅시다. 번들링된 엔트리 파일에는 런타임 chunk를 포함합니다. 런타임 chunk가 정확히 무엇인지는 이해못했지만 실행에 필요한 chunk라고 합시다. optimization.runtimeChunk를 활성화하게 되면 이 런타임 chunk를 분리시킬 수 있습니다.

만약 multi-entry 어플리케이션이라면 "multiple"이라는 속성을 줍니다. 각각의 엔트리에 대한 런타임을 chunk로 분리합니다.

그러나, 만약 single-entry인 spa라면 "single" 이라는 속성을 줍니다. 이렇게 되면 엔트리 파일을 여러개 지정하더라고 하나의 런타임 chunk를 공유하게 됩니다.