WebPack5 #1 - 핵심 내용

 

안녕하세요.

비트코인 하다가 나락간 하프입니다. 😂

 

이번에 알아볼것은 웹팩 입니다.

제가 참조했던 자료는 webpack 사이트 입니다.

한국어로 번역이 되어있고 가이드도 친절하니 한번 해보시면 좋을 듯 합니다.

 

📝 목차

​

 

 

웹팩이란?

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리 입니다.

 

webpack 버전 4.0.0 이후로는 프로젝트를 번들링하기 위한 설정 파일을 필요로 하지 않습니다. 하지만 사용자 요구에 따라 기대 이상으로 유연하게 설정이 가능 합니다.

 

웹팩의 장점

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있습니다.

2. 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉽습니다.

 

---

 

핵심 개념

주요 개념은 6개만 알아두면 바로 번들링을 시작할 수 있습니다.

 

Entry(엔트리)
Output(출력)
Loaders(로더)
Plugins(플러그인)
Mode(모드)
Browser Compatibility(브라우저 호환성)

 

Entry (엔트리)

엔트리 포인트는 webpack이 내부의 참조하고자 하는 파일들을 생성할 때 사용해야 하는 모듈입니다.

Webpack은 엔트리 포인트가 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 찾아냅니다.

기본값은 ./src/index.js이지만, webpack 설정에서 entry 속성을 설정하여 다른 (또는 여러 엔트리 포인트)를 지정할 수 있습니다.

 

webpack.config.js

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

 

 

Output (출력)

output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 합니다. 

기본 출력 파일의 경우에는 ./dist/main.js로, 생성된 기타 파일의 경우에는 ./dist 폴더로 설정됩니다.

 

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 (로더)

webpack은 기본적으로 JavaScript와 JSON 파일만 이해합니다. 

로더를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환 하여 애플리케이션에서 사용하거나 종속성에 추가합니다.

 

이를 이용해 css, jpg, xml 등 다양한 파일들을 처리할 수 있습니다.

 

webpack.config.js

const path = require('path');

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

 

 

Plugins (플로그인)

로더는 특정 유형의 모듈을 변환하는 데 사용되지만, 플러그인을 활용하여 번들을 최적화하거나, 애셋을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있습니다.

 

주로는 HtmlWebpackPlugin을 사용하며, 수동으로 index.html을 변경을 해주어야 했다면,

htmlWebpackPlugin을 사용하여, index.html을 자동으로 번들링하여 내보내 준다고 생각하면 됩니다. 

 

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

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

 

 

그외에도 많은 플로그인들이 있으니 참고 바랍니다!

 

Mode (모드)

mode 파라미터를 development, production 또는 none으로 설정하면 webpack에 내장된 환경별 최적화를 활성화 할 수 있습니다. 기본값은 production 입니다.

 

webpack.config.js

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

 

 

Browser Compatibility (브라우저 호환성)

Webpack은 ES5가 호환되는 모든 브라우저를 지원합니다(IE8 이하는 지원되지 않습니다). 

Webpack은 import() 및 require.ensure()을 위한 Promise를 요구합니다. 구형 브라우저를 지원하려면 이러한 표현식을 사용하기 전에 폴리필을 로드해야 합니다

 

즉 구형 라이브러리를 지원해야 한다면, 문법을 어느정도 변경이 된다고 보시면 됩니다.