Webpack의 Loader와 Plugin의 차이점

Loader
모듈 원본 코드의 변환에 사용됩니다.loader는 웹팩이 비javascript 모듈을 어떻게 처리하고 buld에 이러한 의존을 도입하는지 설명합니다.loader는 파일을 다른 언어(예: TypeScript)에서 JavaScript로 변환하거나 인라인 이미지를 데이터 URL로 변환할 수 있습니다.예를 들어 CSS-Loader, Style-Loader 등이 있습니다.
loader의 사용은 간단합니다.
웹 페이지에 있습니다.config.js에서 로더를 지정합니다.module.rules는 여러 개의loader를 지정할 수 있으며, 프로젝트의loader에 대한 전역적인 개관이 있습니다.
loader는 NodeJS에서 실행되며 options 객체로 구성할 수 있습니다.플러그인은loader에 더 많은 기능을 가져다 줄 수 있습니다.loader는 압축, 포장, 언어 번역 등을 할 수 있습니다.
loader 템플릿 경로에서 해석, npm install node_modules.XX-loader라는 이름을 가진 로더를 사용자 정의할 수도 있습니다.
언어 클래스의 프로세서loader: CoffeeScript, TypeScript, ESNext(Bable), Sass, Less, Stylus.모든 개발 기술 창고는 웹 팩을 사용할 수 있다.
Plugin
로더가 실현할 수 없는 다른 일을 해결하는 데 목적이 있다. 패키지 최적화와 압축, 환경 변수 재정의, 다양한 작업을 처리할 수 있을 정도로 기능이 강하다.웹팩은 상자를 열면 바로 사용할 수 있는 많은 플러그인을 제공합니다. CommonChunkPlugin은 주로 제3자 라이브러리와 공공 모듈을 추출하여 첫 화면에 불러오는 버블 파일을 피하거나 필요에 따라 불러오는 버블 파일의 부피가 너무 커서 불러오는 시간이 너무 길어 최적화된 도구입니다.다중 페이지 응용 프로그램에서는 모든 페이지 간의 응용 프로그램 공유 코드에 버블을 만들 수 있다.
웹 팩의 기능이 강력하고 어려운 점은 설정 파일에 있습니다. 웹 팩4 기본값은 설정 파일이 필요하지 않습니다. 모드 옵션을 통해 웹 팩에 기본 설정을 지정할 수 있습니다. 모드는 개발/프로덕션으로 나뉘고 기본값은 프로덕션입니다.
플러그인은 파라미터를 휴대할 수 있기 때문에plugins 속성에 new 실례를 전송합니다.
[Mode]는 config 파일에서 설정할 수도 있고 CLI 매개 변수에서 설정할 수도 있습니다. 웹 팩--mode=production(일반적으로 CLI, 즉 npm scripts에서 설정할 수 있습니다.)
웹 팩4 이하 버전, 웹 팩3.XX,plugins를 통해 환경 변수를 설정합니다.
[resolve] 모듈,resolver는 라이브러리입니다. 웹팩이bundle가 도입해야 할 모듈 코드를 찾을 수 있도록 도와줍니다. 포장할 때 웹팩은enhanced-resolve를 사용하여 경로를 해석합니다.

 resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'),
 }
 }

[Manifest] 모든 모듈 간의 상호 작용을 관리합니다.runtime는 모듈 식별자를 조회하여 뒤에 대응하는 모듈을 검색할 수 있습니다.
문제1: 웹팩은 버블컴퓨팅 콘텐츠hash를 파일 이름으로 사용하고 파일 수정, 새로운 콘텐츠hash를 새 파일에 집적하여 캐시가 무효입니다. 그러나 파일 내용은 수정되지 않았습니다. 계산된hash는 바뀝니다. 왜냐하면runtime와manifest의 주입은 매번 구조에 변화가 있기 때문입니다.이 파일을 해결하려면runtime와manifest를 더 많이 알 수 있습니다.
웹 팩의 원리: 프로필에 정의된 모듈 목록부터 응용 프로그램을 처리하고 입구 파일부터 의존도를 구축한 다음에 모든 모듈을 소량의bundle로 포장합니다. 보통 하나만 있고 브라우저에서 불러올 수 있습니다.
Webpack의 Loader와 Plugin의 차이점에 관한 이 글은 여기까지 소개합니다. 더 많은 Webpack Loader와 Plugin에 관한 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!