저자 : 우 Haolin
github.com/gwuhaolin/blog/issues/4
좋은 기사 제출하면 자세한 내용을 보려면 여기를 클릭하세요 →
웹팩 JS는 포장 도구가 아닌 완전한 프론트 엔드 빌드 도구입니다. 인기있는 모듈 식 단일 페이지 응용 프로그램에 자사의 인기 감사합니다. 웹팩 거대한 커뮤니티 지원 다양한 기본 시나리오 아래 해결책을 찾을 수 있습니다, 확장 메커니즘을 제공합니다. 이 문서의 목적은 웹팩와 실제 전투에서 일반적인 문제를 해결하기 위해 당신을 가르 칠 것입니다.
웹팩 원리
전투에 다이빙 먼저 작동 원리를 알고 있어야하기 전에 웹팩
웹팩 핵심 개념
모듈 항목 실행 파일 또는 라이브러리 항목.
코드 블록 이러한 모듈 및 모든 조합을 실행 모듈로 파일을 복수의 청크 그리고 웹팩 포장 메카니즘을 반영하는 청크에 의존한다.
로더 파일 변환기는, 예를 들어, ES6의 ES5를 변환,하는 SCS는 CSS로 변환.
추가 된 노드의 수명주기 연장 후크에 구축 확장 웹팩에 대한 플러그인 플러그인, 웹팩 기능 웹팩 추가됩니다.
웹팩 빌드 프로세스
웹팩 출력을 구축하기 위해 처음부터있는 절차의 일련의 경험 :
웹팩 해결 구성 매개 변수, 쉘에서 통합 구성 매개 변수와 최종 구성을 생산, 수신 파일을 webpack.config.js.
모든 플러그인 구성의 등록, 플러그인 빌드 이벤트 노드가 대응하는 반응을하기 위해, 웹팩 라이프 사이클을 듣고 있도록.
항목 항목 파일 구성 파일에서 각 파일이 종속 파일입니다 재귀를 식별, AST 구축 구문 트리를 구문 분석을 시작합니다.
재귀 과정에서 파일 유형에 따라 파일을 구문 분석하고 적절한 로더 로더 설정 파일을 변환하는 데 사용됩니다 찾을 수 있습니다.
각 파일의 최종 결과 순환 후, 생성 된 코드 블록 청크 항목에 따른 구성.
파일 시스템에 대한 모든 청크 출력.
그 주, 재귀 로더의 변환 결과의 이전 결과 UglifyJs 압축 범위의 재 사용 후 같은 UglifyJsPlugin 같은 라이프 사이클을 구축 옳은 일을하고 적시에 플러그인의 일련의.
장면 및 프로그램
다양한 시나리오 및 해당 솔루션은 당신에게 깊은 이해를 허용을 통해 웹팩
단일 페이지 응용 프로그램
소용돌이 데모 ( https://github.com/gwuhaolin/redemo)
한 페이지 응용 프로그램 웹팩이 항목은 모든 종속 파일이 들어있는 항목의 덩어리를 생성하지만, 그것을 얻기 위해 지정된 항목의 입구를 수행하도록 구성 될 필요가 브라우저에서 실행 또한 청크의 js 파일을 생성로드 할 HTML 파일이 필요, 당신이 CSS를 HTML 파일에서 추출 수 있도록해야하는 경우 CSS의 도입을 추출합니다. WebPlugin에서-플러그인 웹 웹팩은 자동으로 이러한 작업을 완료 할 수 있습니다.
웹팩 프로필
CONST {WebPlugin} = 필요 ( '웹 웹팩 - 플러그인');
module.exports = {
항목 : {
app: './src/doc/index.js',
},
플러그인 :
// 一个WebPlugin对应生成一个html文件
new WebPlugin({
//输出的html文件名称
filename: 'index.html',
//这个html依赖的`entry`
requires: ['app'],
}),
],
};
필요 자동 생성 된 HTML에 주입 된 HTML 종속 항목, 항목 및 CSS JS를 지정 [ '문서를'].
또한 이러한 리소스 주입 방법을 구성 할 수 있습니다, 다음과 같은 속성을 지원합니다 :
_dist에만 자원의 도입 전에 프로덕션 환경에서
_dev에만 자원의 도입 전에 개발 환경에서
HTML에서 몰래 자원의 내용을 _inline
단지 자원을 소개하기 만하면 IE를 _ie
이러한 특성은 JS에서 구성 할 수 있습니다 설정하려면
새로운 WebPlugin ({
filename: 'index.html',
requires: {
app:{
_dist:true,
_inline:false,
}
},
}),
또는 설정 템플릿에서 템플릿을 사용의 장점은 유연한 리소스 제어 주입 지점이다.
새로운 WebPlugin ({
filename: 'index.html',
template: './template.html',
}),
<link rel="stylesheet" href="app?_inline">
<script src="ie-polyfill?_ie"></script>
플러그 fis3 생각을 그립니다 WebPlugin 누락 HTML 엔트리 기능 웹팩을 보완합니다. 더 많은 기능의 WebPlugin를 들어, 문서를 참조하십시오.
단일 페이지 응용 프로그램에서 여러 프로젝트 관리
일반적으로 프로젝트는 여러 개의 단일 페이지 응용 프로그램 하나에 결합 될 수 있지만, 단일 페이지 응용 프로그램 이상을 포함하지만, 이렇게하면 또한로드 방문하지 않은 일부 사용자로 이어질 것입니다. 이 프로젝트는 단일 페이지 응용 프로그램의 많은 경우, 각각의 단일 페이지와 WebPlugin 응용 프로그램에 대한 항목을 구성? 프로젝트가 한 페이지 응용 프로그램을 추가 한 경우, 웹팩 새 구성을 갔다? 이 쉽게 이러한 문제를 해결할 수 AutoWebPlugin에서 너무 많은 문제, 웹 웹팩-플러그인입니다.
module.exports = {
plugins: [
// 所有页面的入口目录
new AutoWebPlugin('./src/'),
]
};
각 폴더 AutoWebPlugin 모든 페이지 배치 WebPlugin 출력 해당 HTML 자동 유입구 들어, 페이지 디렉토리 엔트리의 모든 단일 페이지 ./src/ 것이다. 한 페이지 응용 프로그램에 의존하는 코드가 포함 된 폴더에 다음 ./src/에 새 페이지를 추가하려면 AutoWebPlugin 자동으로 폴더 이름이라는 HTML 파일을 생성합니다. 더 많은 기능을 AutoWebPlugin 문서를 참조하십시오.
코드 최적화 부문
좋은 코드는 훌륭한 브라우저 환경을 향상시키는 효과가 화면 분할합니다. 예를 들어, 가장 일반적인 시스템에 당신이 반응 할 수
1. 첫번째 밖으로 기초 라이브러리는 반응-DOM의 REDUX, 그래서만큼 당신이 결코 할 파일의 자신의 버전을 업그레이드하지 않는 한 수행의 장점을 별도의 파일 및 다른 파일에-REDUX 반응보다는 함께 패키지 파일을 넣어 반응 새로 고침. 각 변경 코드는 기본 라이브러리를 포함 브라우저 캐시 무효화 반복 다운로드를 일으키는 비즈니스 코드 파일의 해시 값 변경으로 이어질 것입니다 어디에 당신은 파일에 패키지 이러한 기본 라이브러리 및 비즈니스 코드를 취합니다. 위의 구성은 다음과 같습니다
// vender.js 파일은 비즈니스 코드 새로 고침을 수행 방지하기 위해 별도의 파일로 도서관 재단에서 철수
// 모든 페이지 타사 라이브러리를 사용하여
// 기초 반응
가져 오기 '반응';
수입 '반응-DOM을';
수입 '반응-REDUX을';
// REDUX 기준
수입 'REDUX';
수입 'REDUX은-썽크';
// 웹팩 구성
{
항목 : {
vendor: './path/to/vendor.js',
},
}
다음 코드 블록의 복수 추출 될 수 CommonsChunkPlugin 2. 단일 덩어리를 형성하는 종속 코드이다. 모든 일반적인 코드 페이지가 코드를 하나의 페이지를 감소 응용 프로그램의 페이지의 복수 장면에서 추출, 다시로드 할 필요없이 모든 페이지에 대한 일반적인 다른 코드 페이지 사이를 전환하기 전에로드됩니다.
NPM 패키지의 건설
데모 remd ( https://github.com/gwuhaolin/remd)
실행할 수있는 웹 애플리케이션을 구축하는 것 외에도, 웹팩은 다른 사람에게 NPM까지 전화를 게시하는 JS 라이브러리를 구축하는 데 사용할.
CONST의 nodeExternals는 = ( '웹팩 노드 - 외관')를 요구;
module.exports = {
항목 : {
index: './src/index.js',
},
외관 : nodeExternals ()],
대상 : '노드'
출력 : {
path: path.resolve(__dirname, '.npm'),
filename: '[name].js',
libraryTarget: 'commonjs2',
},
};
웹 응용 프로그램에서 다른 여러 장소가있다 :
외관 : 코드 NPM 설치하여 디렉토리를 배치해야하기 때문에 node_modules node_modules 디렉토리를 제외하는 코드의 [nodeExternals ()는, 그것으로 포장된다.
libraryTarget 'commonjs2는'다른 사람이 JS commonjs 사양에 따라 출력 파일, 실행보다는 호출에 대한 해당 항목이 라이브러리 지적했다.
백엔드 렌더링 구축
코드를 렌더링 서버 측 다른 nodejs 환경에서 실행하고, 코드를 렌더링 브라우저, 서버 측 동시에 JS CSS의 등 이외의 파일을 포함 할 수 없습니다 commonjs 사양이 필요합니다. 다음과 같이 웹팩 구성은 다음과 같습니다
module.exports = {
대상 : '노드'
항목 : {
'server_render': './src/server_render',
},
출력 : {
filename: './dist/server/[name].js',
libraryTarget: 'commonjs2',
},
모듈 : {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.(scss|css|pdf)$/,
loader: 'ignore-loader',
},
]
},
};
키의 일부입니다 :
대상 : '노드'코드에 노드 운영 환경에 구성되어 지정된
libraryTarget 'commonjs2은'코드는 출력 사양 commonjs를 나타내는 경우
{시험 : /.(scss|css|pdf)$/,loader '무시 로더를'이} 내부에 포장 노드에서 파일에 액세스 할 수 없습니다 렌더링 서버를 방지하기 위해 수행되지 않습니다.
fis3에서 웹팩에 마이그레이션
fis3 및 웹팩 유사점뿐만 아니라 차이가 있습니다. 그들은 그 고용 commonjs 사양과 유사하다, 차이는-JS 비 CSS 자원을 소개하는 방법입니다. 웹팩에 의해 // @require './index.scss'에 의해 fis3는 ( './ index.scss')를 필요로한다. 당신이 웹팩에 fis3에서의 원활한 마이그레이션을 원하는 경우에 당신은 코멘트-필요 로더를 사용할 수 있습니다. 예를 들어,로 구성 IMUI 모듈의 fis3 방법의 사용의 사용이 웹팩 다음과입니다 구축하려는 :
로더 : [{
test: /\.js$/,
loaders: ['comment-require-loader'],
include: [path.resolve(__dirname, 'node_modules/imui'),]
}]
사용자 정의 웹팩 확장
당신이 사회에서 응용 프로그램 시나리오에 대한 해결책을 찾을 수없는 경우 자신에게 로더 또는 플러그인을 작성해야합니다.
웹팩 당신이 결국 할 로더입니다 필요하거나 플러그인 이해하려는 전에 사용자 지정 확장을 쓰기? 이 판단 할 수 있습니다 :
별도의 문서 변환을 확장 할 경우 로더 나머지는 플러그인되는 물품.
어떤 파일이 등이 될 수 있습니다 변환 :
바벨 로더 변환 ES5를 ES6하기
해당 URL 파일에 파일 로더를 교체
원시 로더를 주입하면 텍스트 파일의 코드 내용으로 이동
쓰기 웹팩 로더
데모 코멘트-필요 로더
쓰기 로더는 예로서 언급-필요 로더에 매우 간단합니다 :
module.exports = 함수 (콘텐츠) {
return replace(content);
};
입구 로더는 파일의 내용을 변환하는 것입니다 일을하고자하는 함수를 export 할 필요가있다.
내용 매개 변수를 변환하기 전에 수신 된 내용 파일 문자열의 함수이다, 필요가 변환의 결과로 새로운 콘텐츠의 문자열을 반환하는 모든 파일은 모듈이 로더를 통해 부어 있습니다. 이 로더에서 볼 수 있듯이 만 별도의 코드 블록이 처리 할 수없는 파일을 처리 할 수 있습니다. 공식 문서를 참조 할 수 있습니다 더 복잡한 로더를 작성하려면
쓰기 웹팩 플러그인
데모 최종 웹팩 - 플러그인 ( https://github.com/gwuhaolin/end-webpack-plugin)
시나리오 널리 약간 더 복잡한 플러그인. 예를 들어 최종 웹팩 - 플러그인에서 :
클래스 EndWebpackPlugin {
constructor(doneCallback, failCallback) {
this.doneCallback = doneCallback;
this.failCallback = failCallback;
}
apply(compiler) {
// 监听webpack生命周期里的事件，做相应的处理
compiler.plugin('done', (stats) => {
this.doneCallback(stats);
});
compiler.plugin('failed', (err) => {
this.failCallback(err);
});
}
}
module.exports = EndWebpackPlugin;
입구 로더는 클래스, 새로운 EndWebpackPlugin (), 웹팩 시작 먼저 플러그인을 호출하기 위해 플러그인을 인스턴스화 다음 방법을 적용합니다이 플러그인 생성자에 필요한 매개 변수를 전달할 때 플러그인 기능이 적용 듣고 필요를 내보낼 필요 웹팩 라이프 사이클 이벤트는, 그에 따라 처리.
웹팩 플러그인, 두 가지 핵심 개념이 있습니다 :
컴파일러 : 컴파일러를 실행하기 만 시작이, 컴파일러는 웹팩에서 웹팩 구성을 유지
편집 : 웹팩 모니터 파일 변경 사항이 자동 메커니즘을 컴파일하기 때문에 컴파일 대신 한 번 컴파일.
컴파일러 컴파일 및 일련의 이벤트를 방송합니다.
웹팩 수명주기는 많은 이벤트가 이벤트 후크 및 컴파일 년에서 찾을 수있다. 이들은 단순한 데모, 당신이 플러그인을 작성하거나 웹 웹팩 - 플러그인을 참조하는 방법을 볼 수 있습니다 더 복잡하다.
개요
웹팩은 실제로 매우 간단합니다, 당신은 그 본질을 충당하기 위해 단어를 사용할 수 있습니다 :
웹팩은 플러그인 확장을 통해, 로더 파일을 변환 할 수있는 모듈 형 패키지 JS 도구입니다.
웹팩은 복잡한 기분이 경우, 다양한 로더와 플러그인의 원인이 될해야합니다.
나는 이것이 당신이 유연성 실제 전투에서 웹팩 사용할 수 있도록 원칙과 웹팩의 본질을 이해할 수 있기를 바랍니다. ,
대련 발해 남성 병원 mobile.bhnkyy.net
대련 발해 남성 병원 mobile.0411nk.cn