[React] Webpack(웹팩)이란? 웹팩 설치 및 사용법

목차

-웹팩이란?

-entry

-output

-loaders

-plugins

-mode

-웹팩 설치 및 사용법

 

웹팩이란?

 

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

 

모듈 번들러는 다음과 같은 장점이 존재한다.

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다.
2. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다.
3. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다(예를 들면  typescript).

물론, 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있으나, 웹팩에서는 청크, 캐시, 코드 스플릿 개념들을 도입하면서 이 문제를 해결하고 있다.

 

 

웹팩은 Entry, Output, Loaders, Plugins, Mode로 구성되어 있으며, 각각의 역할은 아래와 같다.

Entry

• entry는 웹팩이 빌드할 파일의 시작 위치를 나타내준다.
• entry 지점으로부터 import되어 있는 다른 모듈과 라이브러리의 연관성을 찾는다.
• entry의 디폴트로 설정된 값은 ./src/index.js 이다.

module.exports = {
  entry: ' ./src/index.js'
};

Output

• output은 웹팩에 의해 생성되는 번들을 내보낼 위치와 파일의 이름을 지정한다.
• output의 기본값은 ./dist/main.js 이다.

const path = require('path');

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

Loaders

• loaders를 통해 자바스크립트 파일이 아닌 파일들도 유효한 모듈로 변환시켜준다.
• loaders의 설정은 싱글 모듈에 대한 rules 프로퍼티를 정의해야 하며, rules 프로퍼티는 test와 use를 필수 프로퍼티로 가진다.
• test 프로퍼티는 변환해야하는 파일 또는 파일들을 식별하는 역할이다.
• use 프로퍼티는 변환되어야 하는 파일에 대하여 어떤 로더를 사용해야하는지 설정한다.

const path = require('path');

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

Plugins

• 로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
• 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
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'})
  ]
};

 

Mode

• mode는 웹팩을 세팅함에 있어서 development, production, none 중 하나를 파라미터로 사용합니다.
• “production”은 최적화되어 빌드된다.
• “development”는 빠르게 빌드된다.
• “none”은 아무 기능 없이 웹팩으로 빌드된다.

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

 

Reference

https://medium.com/@woody_dev/js-webpack-1-%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-f29ebca31da4

[JS][WEBPACK] 1. 웹팩이란 무엇인가

 

웹팩 설치 및 사용법

 

번들링을 할 디렉토리에 들어간 후, 터미널에서

 

npm init

npm install -D webpack webpack-cli

npx webpack-cli .src/index3.js

차례로 해준 뒤,

 

npx create-react-app [파일명]

를 치면 웹팩으로 빌드가 가능하다.(시간은 좀 걸린다.)