웹 팩 6 가지 주요 개념

웹 upack 6 가지 주요 개념

Entry

Output

Loaders

Plugins

Mode

Browser Compatibility

Entry
entry 지시 webpack 은 어떤 모듈 을 사용 하여 내부 의존 관계 도 를 구축 해 야 합 니까?
entry 의 기본 값 은./src/index.js 입 니 다.
웹 팩.config.js(웹 팩 의 프로필)에서 사용자 정의 할 수 있 습 니 다.

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

Output
output 는 웹 팩 이 만 든 가방 을 어디서 보 내 는 지,그리고 이 파일 들 의 이름 을 어떻게 짓 는 지 알려 줍 니 다.
output 의 기본 값 은.../dist/main.js 입 니 다.
웹 팩.config.js(웹 팩 의 프로필)에서 사용자 정의 할 수 있 습 니 다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Loaders
웹 팩 은 자 바스 크 립 트 와 JSON 파일 만 해석 할 수 있 습 니 다.
Loader 는 웹 팩 이 다른 유형의 파일 을 처리 할 수 있 도록 하고 응용 프로그램 에서 사용 하고 의존 관계 도 에 추가 할 수 있 는 유효한 모듈 로 변환 합 니 다.
loaders 는 웹 팩 설정 에 두 개의 속성 이 있 습 니 다:

test 속성 표 지 는 어느 파일 이나 어떤 파일 을 변환 해 야 합 니까?

use 속성 지 시 는 어떤 loader 를 사용 하여 변환 해 야 합 니까?

// webpack.config.js
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: 'babel-loader'
      }
    ]
  }
};

Plugins
loader 는 특정한 유형의 모듈 을 전환 하 는 데 사용 되 지만 플러그 인 을 이용 하여 더욱 광범 위 한 임 무 를 수행 할 수 있 습 니 다.예 를 들 어 가방 최적화,자산 관리 와 환경 변수 주입 등 입 니 다.

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

html-webpack-plugin 이 플러그 인의 용 도 는 응용 프로그램 에 html 파일 을 자동 으로 생 성하 고 자동 으로 주입 하 는 것 입 니 다.
Mode
mode 매개 변 수 를 development,production 또는 none 으로 설정 하면 모든 환경 에 대응 하 는 웹 팩 내 장 된 최적화 를 사용 할 수 있 습 니 다.기본 값 은 production 입 니 다.
mode

production

development

none

// webpack.config.js
module.exports = {
  mode: 'production' // mode default value is 'production'
};

// npm command line in Webpack Cli
webpack --mode=production

Browser Compatibility
브 라 우 저 호 환