webpack3의 로더 분석

웹팩은 무엇을 할 수 있나요? 공식 홈페이지에서 제공하는 답변은 한 문장으로 모든 것을 간단하게 만든다는 것입니다! 다양한 로더가 끝없이 등장하여 구축 시 당황스럽습니다. 여기에 로더에 대한 전체 분석을 요약합니다. 이 글은 주로 webpack3의 로더에 대한 전체 분석을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고자료를 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

Concept

loader, 이름에서 알 수 있듯이, 영어 설명은 다음과 같습니다.

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

중국어 번역은 다음과 같습니다.

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

이로부터 로더의 강력한 역할을 볼 수 있습니다. 분석해 보겠습니다.

1. 전환의 역할. 개발에 사용되는 모든 것은 웹 페이지 로딩에 필요한 html+css+js+img 등 필수 형식의 파일로 변환됩니다.

2. 변환 객체는 소스코드입니다. 로더는 소스 코드만 변환하며, 다른 기능의 경우 플러그인이 수행할 수 없는 작업을 대신합니다.

한 문장으로 요약하자면, 로딩 기계인 로더는 두유 기계와도 같아서 재료만 넣으면 본격적으로 작동이 시작됩니다!

일반적으로 사용되는 로더

1, babel-loader

이 패키지를 사용하면 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'
}

E
2, 스타일 로더

CSS를 domcture a & lt; 스타일 & gt;에 추가합니다.

설치:

npm install style-loader --save-dev

css-loader와 함께 사용하는 것이 좋습니다

용도:

{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader'
]
}

3, css-loader

CSS 파일을 구문 분석한 후 import를 사용하여 로드하고 CSS를 반환합니다. code

설치:

npm install css-loader --save-dev

사용:

{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
}

4, less-loader

적은 파일 로드 및 번역

설치:

npm install --save-dev less-loader less

사용 :

{
 test: /\.less$/,
 exclude: /node_modules/,
 use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}

5, url-loader

파일을 base64로 인코딩된 URL로 로드

이미지 파일을 처리하지만 파일이 제한보다 작을 경우 데이터 URL을 반환할 수 있음

설치 : rR

npm install --save-dev url-loader

ASUSE :

{
 test: /\.(jpg|jpeg|png|gif)$/,
 loader: 'url-loader',
 options: {
   limit: 8192
 }
}

6, File-Loader

instructs 웹 팩을 파일로 파일로 방출하고 공개 URL을 반환합니다. g 등 , 파일을 출력 폴더로 보내고 (상대) URL을 반환합니다.

설치:

npm install file-loader --save-dev

E
사용:

{
 test: /\.(woff|woff2|svg|eot|ttf)$/,
 use: 'file-loader'
}

E

7, Vue-loader

로드하고 VUE VUE 컴포넌트 번역

설치:

npm install --save-dev vue-loader vue vue-template-compiler

사용:

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
   loaders: {
     less: ExtractTextPlugin.extract({
       use: ['css-loader', 'less-loader'],
       fallback: 'vue-style-loader'
     })
   }
 }
}

관련 권장 사항:

Java 클래스 로딩 방법 기반 클래스 로더에 대한 자세한 설명

웹팩을 이해하는 방법 Medium 로더 및 플러그인

yii2가 웹업로더를 사용하여 이미지 업로드를 구현하는 방법에 대한 예제 분석

위 내용은 webpack3의 로더 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!