webpack - settings

module

• 웹 개발 시, 분리된 각 JS 파일을 module이라 할 수 있다
• 모듈로 분리하면? → 모든 JS 파일에서 재사용이 가능(export/import) → 개발 생산성 증대!
• But 분리된 module이 늘어날수록, 브라우저의 자원 요청은 증가 → 로딩 지연!

그렇다면... module 분리를 통한 개발상의 편의점과, 로딩 시간 단축을 둘 다 가져가기 위해서는?
→ module을 분리해 개발하고, 배포 직전에 각 module을 하나의 파일로 묶어서 배포하면 될 테다!

이렇게 여러 module들을 하나로 묶는 작업은 bundling이라 하고,
webpack은 bundling을 수행하는 module bundler라 할 수 있겠다!

webpack

JavaScript application을 위한 정적 module bundler!

// webpack에서의 module 구성
ES modules : import 구문
Common JS modules : require() 구문
AMD modules : define 과 require 구문
CSS imports : css/sass/less 파일들 안에서 사용되는  @import 구문
Image URLs : url(...) 또는 <img src="..." />

webpack을 통해 위와 같이 서로 다른 종유의 module들을 모두 JS 코드로 합쳐 import 할 수 있다.

webpack setting

오늘날 대부분의 FE 라이브러리(React, Vue...)에서는
애플리케이션 세팅을 위한 CLI 도구(create-react-app, @vue/cli...)를 제공한다.
해당 CLI 도구는 대부분의 환경 설정을 추상화하고 기본값을 제공!
→ 직접 webpack을 설정해 해당 기본값들을 조정할 수 있다!

기본 세팅

// package.json 생성
npm init -y

// 필수 webpack 패키지 설치
npm install --save-dev webpack webpack-cli webpack-dev-server

설치 후 package.json 파일에서 기존 test 스크립트 대신, dev용 스크립트 작성해주자.

// package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "To demonstrate the working of Webpack",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development"
  },
  "author": "Harsha Vardhan",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

이후 npm run dev 실행시, 에러가 발생한다(Entry module not found)
→ 기본적으로 webpack이 entry point로 src/index.js를 찾기 때문에 발생!
따라서 새로운 폴더(src)와 파일(index.js)를 만든 후 다시 실행해주면 된다.

실행하게되면 dist라는 폴더 내에 main.js 파일이 빌드되어있는데,
이는 webpack이 dist 폴더 내에 빌드한 파일을 추출하기 때문!

웹팩 설정하기

webpack 설정을 위해 root 폴더에 webpack.config.js 파일을 만들어야 한다.
해당 파일에서 환경 설정 객체를 추출해야 하는데...
이는 webpack이 Node.js와 같은 JS 환경에서 동작하기 때문!

// 주로 사용되는 용어
Entry point : 모든 의존 객체들이 모인 웹팩의 시작점을 정의합니다. 이러한 의존들은 의존 그래프를 생성합니다.
Output : 어느 곳에 빌드 과정에서 JS와 정적 파일들을 모을지 정의합니다.
Loaders : 웹팩이 다양한 파일 확장자를 다룰 수 있도록 도와주는 서드파티 확장 프로그램들입니다. JS가 아닌 파일들을 모듈로 바꿔줍니다.
Plugins : 웹팩의 동작 방식을 바꿔주는 서드파티 확장 프로그램들입니다.
Mode : 개발(development) 과 출시(production) 두 모드를 정의합니다. 기본은 출시(Production)입니다.

Entry point 변경
앞서 기본 entry point가 src/index.js임을 확인했다.
이를 변경하고 싶다면?

// 추출된 객체에 entry 속성 추가
module.exports = {
  entry: './source/index.js',
}

// 다음과 같이 사용할 수도 있다
const path = require('path')
module.exports = {
  entry: { index: path.resolve(__dirname, 'source', 'index.js') },
}

source/index.js로 entry point를 변경해줬다!

추출 폴더 변경
마찬가지로 앞서 빌드된 파일이 dist 폴더 내에 생성됨을 확인했다.
이 역서 바꾸고 싶다면?

const path = require('path')

// output 속성을 통해 세팅
module.exports = {
  output: { path: path.resolve(__dirname, 'build'), filename: 'main.js' },
}

빌드 파일에 html파일 포함
모든 web application은 적어도 하나의 html파일을 포함한다.
webpack은 html-webpack-plugin란 플러그인을 사용해 html을 동작하게 한다.

npm install --save-dev html-webpack-plugin

해당 플러그인은 html파일을 읽고, 같은 파일에 번들을 삽입하는 역할!

// source 폴더에 index.html파일을 만든 후 보일러 플레이트 코드 삽입
// 해당 내용을 webpack 파일에 설정!

const HTMLWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  plugins: [
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, 'source', 'index.html'),
    }),
  ],
}

webpack Dev Server
생성된 html 파일을 받아줄 서버가 필요하다 → webpack-dev-server 설정!

./package.json
// 서버를 시작하기 위한 script 추가
"scripts": {
  "dev": "webpack --mode development",
  // 빌드용 dev script가 있으니, 개발을 위한 start script를 추가
  "start": "webpack-dev-server --mode development --open"
}

터미널에서 npm start를 실행해보면...
localhost:8080에 index.html이 전달되었고, main.js가 bundling되어 포함된 것을 확인할 수 있다!