바로 이전 포스트에서, 웹팩으로 환경설정해 나만의 (사실 강의도 보고 핸드북도 보고 다른 블로그도 열심히 참고했지만) React 환경설정을 어느정도 마무리를 했다. 그런데, 이걸 할때 궁금했던 점은 loader 와 plugin은 왜 다르고, 왜 분리해두었을까? 하는 부분이었다. 강의에서도 슬쩍 지나가면서 한마디 했던 것 같은데 웹팩을 처음 공부하고 있던 나는 정신없이 다른 정보를 받아적느라 정신도 없었다.
loader
로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성입니다.
(ref : https://joshua1988.github.io/webpack-guide/concepts/loader.html#loader)
로더는 이와 같은 거라고 하는데, 전 글에 있던 웹팩설정들을 조금 가져와서 확인해보자.
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},loader을 작성했던 부분은 대부분 이러한 부분이었다. 이러한 부분을 통해, 알수 있는 점은 다음과 같다.
- 자바스크립트 파일이 아닌 웹 자원- 그중 css와 관련된 로더가 대부분이었다.
- 이를 통해 웹팩이
css를 읽을 수 있다고 이해했다. - 이게 없었으면, 오류가 나는 과정을 한번 확인했었고 관련
loader을 설치해달라는 명확한 오류 메세지를 띄워주었을 것이다.
그런데, 이러한 로더의 특징은 다음과 같다.
- 오른쪽에서 왼쪽으로 읽는다.
- 위에 따르면
sass로 먼저 읽고 (이는css를 위한 전처리기니까)
-> 그 다음에,css를 읽고,
-> css파일 압축을 위한 MiniCssExtractPlugin.loader로 한번 읽는 셈이다.
plugin
그러면 plugin은 무엇인가?
플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성입니다. 로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 보면 됩니다.
(ref: https://joshua1988.github.io/webpack-guide/concepts/plugin.html#plugin)
플러그인을 작성했던 부분도 가져와서 확인해보자.
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
},
}),
new CssMinimizerPlugin(),
],이와 덧붙여 html plugin까지 세개의 플러그인을 사용했는데,
각 플러그인은 파일을 해석하고 변환하진 않고 결과물의 형태자체를 바꿔주는 역할을 한다.
- terserPlugin은 압축시켜주고 (파일의 결과물을 바꿔주는구나)
- cssminimizerPlugin도 압축시켜주고,
- htmlwebpackplugin은 템플릿을 받아 새로운 결과물을 만들어 준다.
플러그인은 단순히 읽고 해석해주는 게 아니라, 결과물까지 바꿔준다고 이해했다.
