webpack
로더
수색…
비고
Webpack 로더는 "preLoaders", "loaders"및 "postLoaders"로 구성 할 수 있습니다. 반드시 필요하지는 않지만 linting이나 다른 명령형 또는 직렬 연산을 사용하는 구성은 파이프 라인에서 이러한 빌드 단계를 이용할 수 있습니다.
로더와 그 사용을 이해하는 열쇠는 Webpack이 로더 시스템을 통해 요구 그래프에서 각 모듈을 실행한다는 것입니다. 위의 예에 따르면 Webpack은 응용 프로그램 가져 오기를 통해 크롤링을 시작하므로 필요한 파일을 식별하고 간단한 정규식을 사용하여 어떤 파일 또는 파일 유형에서 어떤 로더 또는 일련의 로더가 필요한지 결정합니다.
위의 ".js"또는 ".jsx"파일은 preLoader 단계의 eslint-loader 에 의해 eslinted 될 것입니다. 다른 js|x 파일 형식은 기본 로더 단계에서 babel-loader 를 통해 실행됩니다. 또한 동일한 단계에서 모든 .scss 파일이 sass-loader에 로드됩니다. 이렇게하면 JS 모듈에서 Sass 파일을 가져 와서 결과 JS 묶음 또는 다른 별도의 독립 실행 형 CSS 묶음 ( 플러그인 사용 )으로 출력 할 수 있습니다.
참고 : .scss 파일 가져 오기는 Webpack 및 해당 로더에서만 작동합니다. 노드는 사전 처리기 또는 변환기없이이 종류의 가져 오기를 인식하지 못합니다.
또한 .scss 예제에서 ! 사용하여 로더를 "연결"하는 기능이 있습니다 ! 느낌표는 여러 로더 사이의 "파이프"로 표시됩니다. 위의 예는 "sass-loader"의 출력을 "css-loader"로 파이프하고 마지막으로 "style-loader"로 파이프합니다.이 작업은 loaders: ['style-loader', 'css-loader', 'sass-loader'] 배열로 수행 할 수도 있습니다 loaders: ['style-loader', 'css-loader', 'sass-loader'] 합니다. 인라인 로더 정의에는 다양한 옵션을 사용할 수 있으며 URL에 일반적으로있는 쿼리 매개 변수 구문을 따릅니다.
eslint에는 preLoader, jsx 및 css 로더 체인에는 babel을 사용합니다.
다음 구성을 프로젝트를 라이브러리로 묶을 기본 구성으로 사용할 수 있습니다. 모듈 구성에 프리 로더 및 로더 목록이 어떻게 포함되어 있는지 확인하십시오.
// webpack.config.js
var path = require('path');
module.exports = {
entry: path.join(__dirname, '..', 'src/index.js'),
output: {
path: path.join(__dirname, '..', '/lib'),
filename: outputFile,
library: 'myCoolBundle.js',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
preLoaders: [
{
test: /(\.jsx|\.js)$/,
loader: "eslint-loader",
exclude: /node_modules/,
}
],
loaders: [
{
test: /(\.jsx|\.js)$/,
loader: ['babel'],
exclude: /(node_modules)/,
include: path.join(__dirname, '..'),
query: {
presets: [ 'es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader!sass-loader"]
}
]
},
resolve: {
root: path.resolve(__dirname, '..', './src'),
extensions: ['', '.js', '.jsx', '.scss'],
fallback: path.join(__dirname, '../node_modules')
},
eslint: {
configFile: path.resolve(__dirname, '..', '.eslintrc'),
}
};