webpack 개념 0.Concepts

개념

모던 자바스크립트 어플리케이션을 위한 스태틱 모듈 번들러 

(static module bundler for modern JavaScript applications)

프로젝트에서 필요한 모든 모듈을 의존성 그래프를 만들어 매핑 -> 하나, 혹은 그 이상의 번들 생성

핵심 개념

• 엔트리 Entry
• 아웃풋 Output
• 로더 Loaders
• 플러그인 Plugins

엔트리 Entry

entry point : 어떤 모듈을 사용해서 시작할지

디폴트는 ./src/index.js 이지만 수정하거나 여러개의 엔트리 포인트를 설정할 수 있다.

webpack.config.js

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

아웃풋 Output

만들어진 번들을 어떤 파일명으로, 어느 폴더에 위치할지 정해줌

./dist/main.js 가 메인 결과 파일

./dist 는 다른 생성 파일들이 위치함

output.filename : 파일명

output.path : 위치

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

웹팩은 javascript 파일만 이해할 수 있다.

로더를 사용하면 다른 종류의 파일을 처리할 수 있도록 만들어줌

어플리케이션에서 사용될 수 있는 모듈로 변환 시켜 주고, 의존성 그래프에 추가해줌

test 속성 : 어떤 파일을 변환할지 나타냄

use 속성 : 변환을 위해 어떤 로더를 사용하는지 나타냄

webpack.config.js

const path = require('path');

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

플러그인 Plugins

로더는 특정 유형의 모듈을 변환하는데 사용되지만, 플러그인은 번들 최적화, 에셋관리, 환경변수의 의존성 주입등 다양한 작업을 위해 사용될 수 있다.

require( ) 를 통해 호출,

plugins 배열에 추가

대부분의 플러그인은 옵션을 통해 커스터마이징할 수 있다.

각기 다른 목적으로 여러번 호출할 수 있으므로, new 연산자를 이용해 인스턴스를 생성해야 한다.

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

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

위의 예에서, html-webpack-plugin은 생성된 모든 번들을 자동으로 주입해서 HTML파일을 만들어낸다.

웹팩 플러그인 리스트 : list of plugins

모드 Mode

development, production, none

각 환경에 일치하는 웹팩의 내장된 최적화 도구 사용

기본값은 production

module.exports = {
  mode: 'production'
};

브라우저 호환성

ES5를 지원하는 모든 브라우저 호환(IE8 이하는 안됨)

import( ), require.ensure( )를 위한 Promise 필요

하위 버전 지원하려면 polyfill 사용해야함

출처 : https://webpack.js.org/

개념

webpack 개념 0.Concepts

webpack 개념 1.엔트리 포인트 Entry Points

webpack 개념 2.아웃풋 Output

webpack 개념 3.모드 Mode

webpack 개념 4.로더 Loaders

webpack 개념 5.플러그인 Plugins

webpack 개념 6.설정 Configuration

가이드

webpack 강좌 1 : 설치

webpack 강좌 2. 시작하기

webpack 강좌 3. 에셋(자산) 관리 (Asset Management)

webpack 강좌 4. 결과물(Output) Management

webpack 강좌 5. 개발 Development

webpack 강좌 6. 핫 모듈 리플레이스먼트 Hot Module Replacement