webpack3의 로더 사용량 분석

이번에는 webpack3의 로더 사용 분석을 가져오겠습니다. webpack3의 로더 사용 및 분석에 대한 주의사항은 무엇인가요?

먼저 webpack 공식 홈페이지를 보여주세요. webpack은 무엇을 할 수 있나요? 공식 홈페이지에서 제공하는 답변은 한 문장으로 모든 것을 간단하게 만든다는 것입니다!

다양한 로더가 끝없이 등장하여 구축 시 당황스럽습니다. 여기에 로더에 대한 전체 분석을 요약합니다.

콘셉트

로더(Loader), 이름 그대로 로더(loader), 영어 설명은 다음과 같습니다.

로더는 소스 코드에 적용되는 변환입니다. 모듈을 사용하면 파일을 가져오거나 "로드"할 때 사전 처리할 수 있습니다. 따라서 로더는 다른 빌드 도구의 "작업"과 비슷합니다. 로더는 프런트엔드 빌드 단계를 처리하는 강력한 방법을 제공합니다. 파일을 다른 언어(예: TypeScript)로 변환 JavaScript 또는 데이터 URL인 인라인 이미지를 사용하면 다음 작업도 수행할 수 있습니다. JavaScript 모듈에서 직접 CSS 파일을 가져오는 것과 같은 것!

중국어 번역:

로더는 모듈의 소스 코드를 변환하는 데 사용됩니다. 로더를 사용하면 모듈을 가져오거나 "로드"할 때 파일을 사전 처리할 수 있습니다. 그러므로 로더는 다른 빌드 도구의 "작업"과 유사하며 프런트 엔드 빌드 단계를 처리하는 강력한 방법을 제공합니다. 로더는 다음과 같은 다양한 언어의 파일을 로드할 수 있습니다. TypeScript)를 JavaScript로 변환하거나 이미지를 데이터 URL로 인라인합니다. 로더를 사용하면 JavaScript를 직접 사용할 수도 있습니다 모듈에서 CSS 파일을 가져옵니다! 이를 통해 로더의 강력한 역할을 볼 수 있습니다. 분석해 보겠습니다.

전환의 역할. 개발에 사용되는 모든 것은 웹 페이지 로딩에 필요한 html+css+js+img 등 필수 형식의 파일로 변환됩니다.
변환 객체는 소스코드입니다. 로더는 소스 코드만 변환하며, 다른 기능의 경우 플러그인이 수행할 수 없는 작업을 대신합니다.
한 문장으로 요약하자면, 로딩 기계인 로더는 두유 기계와 같습니다. 재료를 넣으면 본격적으로 작동하기 시작합니다!

일반적으로 사용되는 로더

1. 바벨 로더

이 패키지를 사용하면 Babel 및 webpack을 사용하여 JavaScript 파일을 트랜스파일할 수 있습니다.

ES2015+ 코드를 로드하고 Babel을 사용하여 ES5

로 트랜스파일하세요. 설치:

npm install --save-dev babel-loader babel-core babel-preset-env webpack

사용:

{
 test: /\.js$/,
 exclude: /node_modules/,
 loader: 'babel-loader'
}

2. 스타일 로더