이번에는 webpack3의 로더 사용 분석을 가져오겠습니다. webpack3의 로더 사용 및 분석에 대한 주의사항은 무엇인가요?
먼저 webpack 공식 홈페이지를 보여주세요. webpack은 무엇을 할 수 있나요? 공식 홈페이지에서 제공하는 답변은 한 문장으로 모든 것을 간단하게 만든다는 것입니다!
다양한 로더가 끝없이 등장하여 구축 시 당황스럽습니다. 여기에 로더에 대한 전체 분석을 요약합니다.
콘셉트
로더(Loader), 이름 그대로 로더(loader), 영어 설명은 다음과 같습니다.
로더는 소스 코드에 적용되는 변환입니다. 모듈을 사용하면 파일을 가져오거나 "로드"할 때 사전 처리할 수 있습니다. 따라서 로더는 다른 빌드 도구의 "작업"과 비슷합니다. 로더는 프런트엔드 빌드 단계를 처리하는 강력한 방법을 제공합니다. 파일을 다른 언어(예: TypeScript)로 변환 JavaScript 또는 데이터 URL인 인라인 이미지를 사용하면 다음 작업도 수행할 수 있습니다. JavaScript 모듈에서 직접 CSS 파일을 가져오는 것과 같은 것!
중국어 번역:
로더는 모듈의 소스 코드를 변환하는 데 사용됩니다. 로더를 사용하면 모듈을 가져오거나 "로드"할 때 파일을 사전 처리할 수 있습니다. 그러므로 로더는 다른 빌드 도구의 "작업"과 유사하며 프런트 엔드 빌드 단계를 처리하는 강력한 방법을 제공합니다. 로더는 다음과 같은 다양한 언어의 파일을 로드할 수 있습니다. TypeScript)를 JavaScript로 변환하거나 이미지를 데이터 URL로 인라인합니다. 로더를 사용하면 JavaScript를 직접 사용할 수도 있습니다 모듈에서 CSS 파일을 가져옵니다! 이를 통해 로더의 강력한 역할을 볼 수 있습니다. 분석해 보겠습니다.
일반적으로 사용되는 로더
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. 스타일 로더