webpack
로더 및 플러그인
수색…
비고
로더와 플러그인은 Webpack의 빌딩 블록을 구성합니다.
로더는 일반적으로 단일 작업 및 파일 형식으로 위임됩니다. 설치가 쉽고 일반적으로 더 적은 상용구 코드가 필요합니다.
반면, 플러그인은 후크를 통해 Webpack의 내부 빌드 시스템에 액세스 할 수 있으므로 더 강력합니다. 플러그인은 완전히 구성된 Webpack 환경을 수정할 수 있으며 컴파일 프로세스 전체에서 사용자 정의 액션을 수행 할 수 있습니다.
예를 들어 CSS 파일을 처리 할 때 로더를 사용하면 속성에 공급 업체 접두사를 자동으로 추가 할 수 있으며 플러그인은 번들러 빌드 프로세스에서 축소 된 스타일 시트를 생성하는 데 사용할 수 있습니다.
로더 시작하기
시작하려면 프로젝트에 원하는 로더를 npm install 하십시오.
webpack.config.js 에서 내보내는 구성 객체 안에 module 속성이 모든 로더를 보유합니다.
const source = `${__dirname}/client/src/`;
module.exports = {
// other settings here
module: {
loaders: [
{
test: /\.jsx?$/,
include: source,
loaders: ['babel?presets[]=es2015,presets[]=react', 'eslint']
},
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer', 'sass']
}
]
},
};
위의 구성에서는 로더에 대해 세 가지 기본 설정을 사용합니다.
- test : 여기에서는 RegExp를 사용하여 특정 확장자에 로더를 바인딩합니다. 첫 번째 세트의 로더는 모든 .js 및 .jsx 파일에서 실행됩니다. 두 번째 집합은 모든 .css 및 .scss 파일에서 실행됩니다.
- include : 이것은 로더가 실행되기를 바라는 디렉토리입니다. 선택적으로
exclude속성을 사용하여 포함시키지 않으려는 디렉토리를 쉽게 정의 할 수 있습니다. - loaders :
test및include지정된 파일에서 실행하려는 모든 로더의 목록입니다.
로더는 각 로더 배열에서 오른쪽에서 왼쪽으로, 개별 정의에서 아래에서 위로 실행된다는 점에 유의해야합니다. 아래 코드는 sass, autoprefixer, css, style 순서로 로더를 실행합니다.
loaders: [
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer']
},
{
test: /\.s?css$/,
include: source,
loaders: ['sass']
}
]
이것은 webpack을 처음 사용하는 개발자에게 혼란과 버그의 흔한 원인입니다. 예를 들어, JSX와 ES6 구문을 사용할 때, 우리는 바벨 로더가 제공하는 컴파일 된 코드를 보풀이 아니라 그 코드를 보충하고 싶다. 따라서 우리의 eslint 로더는 우리의 바벨 로더의 오른쪽에 있습니다.
Google의 로더를 나열 할 때 -loader 접미사는 선택 사항입니다.
loaders: ['sass']
...는 다음과 같습니다.
loaders: ['sass-loader']
또는 loader 속성 (단수)을!와 함께 로더 목록을 구분하는 문자열과 함께 사용할 수 있습니다 ! 캐릭터.
loaders: ['style', 'css']
...는 다음과 같습니다.
loader: "style!css"
타이프 스크립트 파일로드 중
webcap과 함께 typescript를 사용하려면 typescript 와 ts-loader 설치되어 있어야합니다.
npm --save-dev install typescript ts-loader
이제 typescript 파일을 사용하도록 webpack을 구성 할 수 있습니다.
// webpack.config.js
module.exports = {
..
resolve: {
// .js is required for react imports.
// .tsx is required for react tsx files.
// .ts is optional, in case you will be importing any regular ts files.
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
// Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
test: /\.tsx?$/,
loaders: isProduction ? ['ts-loader'] : ['react-hot-loader', 'ts-loader'],
exclude: /node_modules/
}
]
},
...
};