로더는 웹팩의 핵심 중 하나입니다. 다양한 유형의 파일을 웹팩 인식 모듈로 변환하는 데 사용됩니다.
사용하다
module: {
loaders: [
{
test: /\.css$/,
use: ['style-loader']
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
]
}
로더와 플러그인의 차이점
로더는 모듈의 소스 코드를 변환하는 데 사용되며 플러그인의 목적은 로더가 달성 할 수없는 다른 문제를 해결하는 것입니다.
플러그인은 모든 단계에서 호출 할 수 있으며, Loader를 통해 Loader의 출력을 추가로 처리하고, 사전 등록 된 콜백을 실행하고, 컴파일 객체를 사용하여 일부 하위 수준 작업을 수행 할 수 있습니다.
체인에서 여러 로더 호출
체인에서 여러 로더를 호출 할 때 역순으로 실행된다는 점을 기억하십시오. 배열의 형식에 따라 오른쪽에서 왼쪽으로 또는 아래에서 위로 실행됩니다.
- 마지막 로더를 초기라고하며 원래 리소스 콘텐츠가 전달됩니다.
- 첫 번째 로더는 마지막으로 호출되며 예상 값은 나가는 JavaScript 및 소스 맵 (선택 사항)입니다.
- 미들 로더가 실행되면 이전 로더의 결과가 전달됩니다.
웹팩 리소스 로딩은 작업 파이프 라인과 유사하며 여러 로더를 사용할 수 있으며 출력 결과는 표준 js 코드 여야합니다.
예 :
//webpack.config.js
{
test: /\.js/,
use: [
'bar-loader',
'foo-loader'
]
}
foo-loader는 원래 리소스로 전달되고, bar-loader는 foo-loader의 출력을 수신하고, 최종 변환 된 모듈 (js 코드) 및 소스 맵 (선택 사항)을 반환합니다.
시뮬레이션 로더 구현
시뮬레이션 하나
로더는 .txt 파일을 처리하고 인스턴스의 [name]을 로더 옵션에 설정된 이름으로 직접 바꿉니다. 그런 다음 기본 내 보낸 텍스트가 포함 된 JavaScript 모듈로 돌아갑니다.
//src/loader.js
import { getOptions } from 'loader-utils';
export default function loader(source) {
const options = getOptions(this);
source = source.replace(/\[name\]/g, options.name);
return `export default ${ JSON.stringify(source) }`;
};
사용하다:
module: {
rules: [{
test: /\.txt$/,
use: {
loader: path.resolve(__dirname, '../src/loader.js'),
options: {
name: 'Alice'
}
}
}]
}
시뮬레이션 2
간단한 스타일 로더의 기능을 시뮬레이션합니다.
//将css插入到head标签内部
module.exports = function (source) {
let script = (`
let style = document.createElement("style");
style.innerText = ${JSON.stringify(source)};
document.head.appendChild(style);
`);
return script;
}
사용하다
resolveLoader: {
modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
test: /\.css$/,
use: ['style-loader']
},
https://www.webpackjs.com/contribute/writing-a-loader/를 참조하십시오.
이 기사 링크 https://blog.csdn.net/qq_39903567/article/details/115334778