웹 팩 (2) 웹 팩 소개 및 기본 핵심 개념
7670 단어 전단 개발
웹 팩 은 현대 자 바스 크 립 트 응용 프로그램의 정적 모듈 패키지 (module bundler) 입 니 다.
웹 팩 이 프로그램 을 처리 할 때 의존 관계 도 (dependency graph) 를 재 귀적 으로 구축 합 니 다.
응용 프로그램 에 필요 한 모든 모듈 을 포함 하고 이 모듈 들 을 하나 이상 의 bundle 로 포장 합 니 다.
웹 팩 은 전단 자원 로드 / 포장 도구 입 니 다.
이것 은 모듈 의 의존 관계 에 따라 정적 분석 을 한 다음 에 이 모듈 들 을 지정 한 규칙 에 따라 대응 하 는 정적 자원 을 생 성 할 것 이다.
2. Webpack 네 가지 핵심 개념:
1. 입구 (entry):
(1) 웹 팩 이 내부 의존 도 를 구축 하 는 시작 으로 어떤 모듈 을 사용 해 야 하 는 지 지시 합 니 다.입구 기점 에 들 어가 면 웹 팩 은 어떤 모듈 과 라 이브 러 리 가 입구 기점 (직접 과 간접) 에 의존 하 는 지 찾 아 낼 것 이다.
모든 의존 항목 이 즉시 처리 되 고 마지막 으로 bundles 라 는 파일 에 출력 됩 니 다.
웹 팩 설정 에서 entry 속성 을 설정 하여 입구 기점 (또는 여러 입구 기점) 을 지정 할 수 있 습 니 다.기본 값 은. / src 입 니 다.
(2) 웹 팩 설정 에서 entry 속성 을 정의 하 는 다양한 방식:
1.1 단일 입구 약자 문법: entry: string | Array
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
entry 속성의 단일 입구 문법 은 아래 의 약자 입 니 다.
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
요약: 하나의 입구 시작 점 만 있 는 프로그램 이나 도구 (즉 library) 를 위해 웹 팩 설정 을 빠르게 설정 할 때 좋 습 니 다.그러나 이 문법 을 사용 하면 설정 을 확장 할 때 작 동 하지 않 습 니 다.
1.2 대상 문법: entry: {[entryChunkName: string]: string | Array}
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
결론: 대상 문법 은 비교적 번 거 로 울 것 이다.그러나 이것 은 응용 프로그램 에서 입 구 를 정의 하 는 가장 확장 가능 한 방식 이다.
1.3 응용 프로그램 (app) 과 제3자 라 이브 러 리 (vendor) 입구 예제 분리:
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
이러한 방식 은 하나의 입구 기점 (vendor 포함 하지 않 음) 만 있 는 단일 페이지 응용 프로그램 (single page application) 에서 흔히 볼 수 있다.
1.4 다 중 페이지 응용 프로그램:
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
웹 팩 은 독립 적 으로 분 리 된 의존 도 3 개가 필요 합 니 다.모든 HTML 문 서 는 하나의 입구 시작 점 만 사용 합 니 다.
2. 출력 (출력):
output 속성 은 웹 팩 이 만 든 bundles 를 어디서 출력 하 는 지, 이 파일 들 의 이름 을 어떻게 짓 는 지 알려 줍 니 다. 기본 값 은. / dist 입 니 다.
기본적으로 전체 응용 프로그램 구 조 는 지정 한 출력 경로 의 폴 더 에 컴 파일 됩 니 다.
설정 에서 output 필드 를 지정 하여 처리 과정 을 설정 할 수 있 습 니 다.
메모: 여러 개의 입구 시작 점 이 존재 하 더 라 도 하나의 출력 설정 만 지정 합 니 다.
웹 팩 에서 output 속성 을 설정 하 는 가장 낮은 요 구 는 다음 두 가 지 를 포함 하여 값 을 대상 으로 설정 하 는 것 입 니 다. filename 은 파일 을 출력 하 는 파일 이름과 대상 출력 디 렉 터 리 path 의 절대 경 로 를 포함 합 니 다.
const config = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
module.exports = config;
이 설정 은 / home / proj / public / assets 디 렉 터 리 에 단독 bundle. js 파일 을 출력 합 니 다.
만약 설정 이 여러 개의 단독 "chunk" (예 를 들 어 여러 개의 입구 시작 점 을 사용 하거나 Commons Chunk Plugin 과 같은 플러그 인 을 사용) 를 만 들 었 다 면, 모든 파일 에 유일한 이름 이 있 는 지 확인 하기 위해 자리 표시 자 (substitutions) 를 사용 해 야 합 니 다.
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
// ：./dist/app.js, ./dist/search.js
3.loader：
loader 는 웹 팩 이 비 자바 스 크 립 트 파일 (예 를 들 어 TypeScript) 을 처리 할 수 있 도록 합 니 다.
loader 는 모든 종류의 파일 을 웹 팩 이 처리 할 수 있 는 유효한 모듈 로 변환 한 다음 웹 팩 의 포장 능력 을 이용 하여 처리 할 수 있 습 니 다.
본질 적 으로 웹 팩 loader 는 모든 종류의 파일 을 응용 프로그램의 의존 도 (최종 bundle) 와 직접 참조 할 수 있 는 모듈 로 변환 합 니 다.
더 높 은 차원 에서 웹 팩 설정 에서 loader 는 두 가지 목표 가 있 습 니 다.
test ， loader 。
use ， ， loader。
메모: 웹 팩 설정 에서 loader 를 정의 할 때 rules 가 아 닌 module. rules 에 정의 해 야 합 니 다.
대응 하 는 loader 설치 하기:
npm install --save-dev css-loader
npm install --save-dev ts-loader
응용 프로그램 에서 loader 를 사용 하 는 세 가지 방법 이 있 습 니 다.
(1) 설정 (추천): webpack. config. js 파일 에 loader 를 지정 합 니 다.
설정 에서 loader 방식 예제 사용 하기:
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
(2) 내 연: 모든 import 구문 에서 loader 를 명시 적 으로 지정 합 니 다.
import 구문 이나 "import" 와 같은 방식 으로 loader 를 지정 할 수 있 습 니 다.사용!자원 의 loader 를 분리 합 니 다.분 리 된 모든 부분 은 현재 디 렉 터 리 에 비해 분 석 됩 니 다.
import Styles from 'style-loader!css-loader?modules!./styles.css';
(3) CLI: 셸 명령 에서 지정
CLI 를 통 해 loader 사용 하기:
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
상용 로 더:
(1) 컴 파일 관련: babel - loader, ts - loader
(2) 스타일 관련: style - loader, css - loader, less - loader, postcss - loader
(3) 파일 관련: file - loader, url - loader
loader 특성:
(1) loader 는 체인 전달 을 지원 합 니 다.자원 에 파이프라인 (pipeline) 을 사용 할 수 있 습 니 다.체인 로 더 는 사진 을 거꾸로 찍 는 순서에 따라 실 행 될 것 이다.loader 체인 의 첫 번 째 loader 반환 값 은 다음 loader 에 게 줍 니 다.마지막 loader 에서 웹 팩 이 예상 한 자바 스 크 립 트 를 되 돌려 줍 니 다.
(2) loader 는 동기 화 될 수도 있 고 비동기 화 될 수도 있다.
(3) loader 는 Node. js 에서 실행 되 며 가능 한 모든 작업 을 수행 할 수 있 습 니 다.
(4) loader 는 조회 인 자 를 받는다.loader 전달 설정 에 사용 합 니 다.
(5) loader 도 options 대상 을 사용 하여 설정 할 수 있 습 니 다.
(6) package. json 에서 흔히 볼 수 있 는 main 속성 을 사용 하 는 것 외 에 일반적인 npm 모듈 을 loader 로 내 보 낼 수 있 습 니 다. 방법 은 package. json 에서 loader 필드 를 정의 하 는 것 입 니 다.
(7) 플러그 인 (plugin) 은 loader 에 더 많은 기능 을 가 져 다 줄 수 있 습 니 다.
(8) loader 는 임의의 파일 을 추가 로 만 들 수 있 습 니 다.
4. 플러그 인 (plugins):
loader 는 특정 유형의 모듈 을 변환 하 는 데 사용 되 며, 플러그 인 은 더 넓 은 작업 을 수행 할 수 있 습 니 다.
플러그 인의 범 위 는 포장 최적화 와 압축 에서 환경 변 수 를 다시 정의 할 때 까지 포함 합 니 다.플러그 인 인터페이스 기능 이 매우 강해 서 다양한 작업 을 처리 할 수 있 습 니 다.
플러그 인 을 사용 하려 면 require () 만 사용 하고 plugins 배열 에 추가 하 십시오.
대부분의 플러그 인 은 옵션 (option) 을 통 해 사용자 정의 할 수 있 습 니 다.하나의 프로필 에서 서로 다른 목적 으로 같은 플러그 인 을 여러 번 사용 할 수 있 습 니 다. 이 때 는 new 연산 자 를 사용 하여 인 스 턴 스 를 만들어 야 합 니 다.
const HtmlWebpackPlugin = require('html-webpack-plugin'); // npm
const webpack = require('webpack'); //
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
자주 사용 하 는 플러그 인:
(1) 최적화 관련: Commons ChunkPlugin, UglifyjsWebpackPlugin
(2) 기능 관련: ExtractTextWebpackPlugin, HtmlWebpackPlugin, HotModule ReplacementWebpackPlugin, CopyWebpackPlugin
3. Webpack 의 기본 개념:
1. 모드 모드:
development 또는 production 중 하 나 를 선택 하여 mode 인 자 를 설정 합 니 다. 해당 모드 에서 웹 팩 내 장 된 최적화 를 사용 할 수 있 습 니 다.
설정 에서 mode 옵션 을 제공 합 니 다:
module.exports = {
mode: 'production'
};
development: process. env. NODEENV 의 값 을 development 로 설정 합 니 다.NamedChunks Plugin 과 NamedModulesPlugin 사용 하기
production: process. env. NODEENV 의 값 은 production 으로 설정 합 니 다.FlagDependency UsagePlugin, FlagIncludedChunks Plugin, ModuleConcatenationPlugin, NoEmitOnErrors Plugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 과 UglifyJsPlugin 을 사용 합 니 다.
2. 기본 명사:
Chunk: 코드 블록
묶음
모듈: 모듈
좋은 웹페이지 즐겨찾기
