Webpack 기초 튜 토리 얼 의 명사 해석

개념 소개
본질 적 으로 웹 팩 은 현대 자 바스 크 립 트 응용 프로그램의 정적 모듈 패키지(module bundler)이다.웹 팩 이 프로그램 을 처리 할 때 의존 관계 도(dependency graph)를 재 귀적 으로 구축 합 니 다.프로그램 에 필요 한 모든 모듈 을 포함 하고 모든 모듈 을 하나 이상 의 bundle 로 포장 합 니 다.
그것 은 고도 로 설정 할 수 있 지만 시작 하기 전에 네 가지 핵심 개념 을 이해 해 야 합 니 다.
입구(입장)
출력(출력)
loader
플러그 인(plugins)
1.입구(entry)
웹 팩 이 어느 모듈 에서 프로젝트 를 구축 할 지 지정 합 니 다.하나의 입구 기점(또는 여러 개의 입구 기점)을 설정 하여 bundles 라 는 파일 로 처 리 됩 니 다.

// webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js'
}

2.출구(output)
출력 파일 위치,파일 이름 등 을 지정 하 는 패키지 로 생 성 된 bundles 파일 을 처리 합 니 다.

// webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'test_name.bunlde.js'
  }
}

3、loader
loader 역할 은 모든 파일 형식 을 웹 팩 으로 처리 할 수 있 는 유효한 모듈 로 변환 한 다음 웹 팩 을 통 해 파일 을 포장 할 수 있 습 니 다.
본질 적 으로 웹 팩 loader 는 모든 종류의 파일 을 응용 프로그램의 의존 도 를 직접 참조 할 수 있 는 모듈 로 변환 합 니 다.
특수:웹 팩 만 import 를 지원 합 니 다.예 를 들 어.css,vue 등 모든 종류의 모듈 을 가 져 옵 니 다.
웹 팩 설정 loader 의 두 가지 목표:
1.loader 처리 가 필요 한 파일 을 식별 합 니 다.(테스트 속성 사용)
2.파일 을 변환 하여 의존 도 에 추가 하고 최종 적 으로 bunlde 에 추가 할 수 있 도록 합 니 다.(use 속성 사용)

// webpack.config.js
const path = require('path');
const config = {
 entry: './path/to/my/entry/file.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'my-first-webpack.bundle.js'
 },
 module: {
  rules: [
   { test: /\.txt$/, use: 'raw-loader' } 
   // test/use         
  ]
 }
}
module.exports = config;

4.플러그 인(plugins)
플러그 인 을 사용 하면 범위 가 더 넓 은 작업 을 수행 할 수 있 습 니 다.require()참조 후 plugins 배열 에 추가 합 니 다.
또한 같은 플러그 인 을 여러 번 사용 해 야 한다 면 new 연산 자 를 사용 하여 인 스 턴 스 를 만 듭 니 다.
html-webpack-plugin 설치:

npm install html-webpack-plugin --save-dev
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //         
const path = require('path');
const config = {
 entry: './path/to/my/entry/file.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'my-first-webpack.bundle.js'
 },
 module: {
  rules: [
   { test: /\.txt$/, use: 'raw-loader' }
  ]
 },
 plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new HtmlWebpackPlugin({template: './src/index.html'})
 ]
};
module.exports = config;

2.입구 기점(Entry Points)
웹 팩 의 entry 속성 은 하나의 입 구 를 설정 할 수 있 을 뿐만 아니 라 여러 개의 입 구 를 설정 할 수 있 습 니 다.
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'
  }
}

entry 에[파일 경로(file path)배열]을 입력 하면 여러 개의 주 입 구 를 만 들 고 여러 개의 파일 을 동시에 주입 해 야 할 때 사용 합 니 다.
2.여러 개의 입구(약자)설정
대상 문법
용법:entry:{[entry ChunkName:string]:string|Array}

// webpack.config.js
webpack.config.js
const config = {
 entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
 }
};

문법 이 번 거 롭 지만 프로그램 에서 입 구 를 정의 하 는 가장 확장 가능 한 방식 입 니 다.
'확장 가능 한 웹 팩 설정'은 다시 사용 할 수 있 고 다른 설정 과 조합 하여 사용 할 수 있 습 니 다.관심 사(concern)를 환경(environment),구축 목표(build target),실행 시(runtime)에서 분리 하 는 유행 하 는 기술 입 니 다.그리고 전문 도구(예 를 들 어 웹 팩-merge)를 사용 하여 통합 합 니 다.
흔 한 장면
일반적인 입구 설정 과 실제 사례 를 보 여 줍 니 다.
(1)응용 프로그램(app)과 제3자 라 이브 러 리(vendor)입 구 를 분리 합 니 다.

// webpack.config.js
const config = {
 entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
 }
};

웹 팩 은 app.js 와 vendors.js 부터 구축 되 었 고 서로 완전히 분리 되 어 독립 되 었 으 며 더 좋 은 vendor 분리 능력 을 제공 하 는 DllPlugin 을 지원 하기 위해 이 장면 을 제거 하 는 것 을 고려 했다.
(2)다 중 페이지 응용 프로그램

// webpack.config.js
const config = {
 entry: {
  pageOne: './src/pageOne/index.js',
  pageTwo: './src/pageTwo/index.js',
  pageThree: './src/pageThree/index.js'
 }
};

웹 팩 에 독립 적 으로 분 리 된 의존 도 3 개가 필요 하 다 는 것 을 알려 줍 니 다.
Commons ChunkPlugin 을 사용 하여 각 페이지 의 응용 프로그램 공유 코드 에 bundle 을 만 듭 니 다.
입구 기점 이 증가 하기 때문에 여러 페이지 의 응용 은 입구 기점 간 의 대량의 코드/모듈 을 재 활용 하여 이런 기술 에서 큰 이익 을 얻 을 수 있다.
웹 팩 기본 튜 토리 얼 에 대해 서 는 아래 글 을 클릭 하 세 요.