Webpack 으로 번들링을 해보자!

Webpack을 사용하는 이유

개발 편의성을 위해 모듈로 분리하여 작업한 리소스들을 그대로 내보내면, 브라우저에서 요청시 각 파일에 대해 개별적인 http 요청을 해야하므로 네트워크 비용이 많이 소모된다. 즉 로딩이 오래걸리고 사용자의 사이트 이탈율이 늘 수밖에 없다.

 

웹팩이라는 번들러를 사용해 모듈로 분리된 파일들을 연관성 있는 것 끼리 묶어서 압축하고 하나로 만들게 되면 일단 파일이 축소되고, 여러번 요청할 필요가 없게된다.

 

웹팩은 모듈 번들러 중에서도 프론트엔드에서 가장 많이 쓰인다. loader와 plugin을 통해서 js, json이 아닌 css, html, 이미지 파일 까지도 포함할 수 있어서 편리하다.

 

기본적인 Webpack 설정

html, css, javaScript 파일의 번들링을 위한 기본적인 웹팩 설정이다.

웹팩을 설치한다.

npm i webpack webpack-cli -D

• 추가적으로 package.json scripts 영역에 코드를 추가해서 npm run build 명령어로 번들링이 되도록 해두자.

// package.json

"scripts": {
    "build": "webpack"
  },

webpack.config.js 를 루트 디렉토리에 생성하고 기본적인 정보를 작성한다.

// path 사용을 위해 모듈 불러오기
const path = require('path');

module.exports = {
	// 의존성 모듈을 찾기 위한 엔트리 포인트
  entry: './src/index.js',
	// 번들 파일이 어떤 위치에 어떤 이름으로 생성될지 경로와 이름 지정
  output: {
		// ./dist 라는 이름의 디렉토리 아래에 bundle.js 라는 이름으로 파일 생성
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

index.html 생성을 위한 설정

# 번들 디렉토리에 html 파일을 추가하기 위한 플러그인
npm i html-webpack-plugin

// webpack.config.js

// 플러그인은 사용 전 불러와준다.
const HtmlWebpackPlugin = require('html-webpack-plugin');

// module.export 코드 내부에 작성
// 플러그인의 인스턴스를 생성해 번들링에 추가해줄 html 파일 경로와 이름을 전달
plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],

dev-server (개발용 서버)

수정사항 발생 시 실시간 로딩을 할 수 있는 개발용 서버 만들기.

npm i webpack-dev-server -D

// webpack.config.js

// module.export 코드 내부에 아래와 같이 속성을 추가해준다. 
devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist'),
    },
    port: 8080,
  },

// package.json 에 scripts 와 mode를 추가해주자.
"scripts": {
		// build 시에는 최적화가 적용된 production 모드를 적용
    "build": "webpack --mode=production",
		// 개발용 서버에서는 development 모드가 아니면 에러가 발생할 수 있다.
    "start": "webpack serve --open --mode=development"
  },

css 적용을 위한 설정 -1. style-loader : internal 방식

loader 를 사용해 node.js 에서 읽을 수 없는 css 파일 등을 추가하여 번들링 할 수 있다. css 와 style 로더를 사용하면 자바스크립트 파일안에서 css 파일을 불러올 수 있고, 번들링 시 포함되는 html 파일 head 태그 내부에 style 태그로 적용된다.

npm i css-loader style-loader -D 

// webpack.config.js

// module.export 코드 내부에 아래와 같이 속성을 추가해준다. 
module: {
    rules: [
      {
        // 파일명이 .css로 끝나는 모든 파일에 적용
        test: /\\.css$/,
        // 오른쪽부터 왼쪽, css -> style 의 순서로 적용되므로 순서에 유의한다.
        use: ['style-loader', 'css-loader'],
        // loader가 node_modules 안의 내용도 처리하므로 예외처리
        exclude: /node_modules/,
      },
    ],
  },

// index.js
// 내가 작성한 js 파일에 css 파일을 import 한다.

import './style.css';

• 기존에 작성한 index.html 안에 css 를 위한 link 태그가 있다면 경로 에러가 발생할 수 있으니 삭제한 후 다시 build 해주자. + scrips 태그도 마찬가지!

css 적용을 위한 설정 -2. mini-css-extract-plugin : external 방식

html 의 헤드 태그 내부에 css가 작성되는 것이 싫다면, external 방식으로 적용할 수 있도록 플러그인을 추가할 수 있다.

npm i mini-css-extract-plugin -D

// webpack.config.js

// 플러그인 불러오기
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 아래 속성들을 수정해준다.
module: {
    rules: [
      {
        test: /\\.css$/,
				// style-loader 를 변경
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
        exclude: /node_modules/,
      },
    ],
  },

plugins: [
		// 플러그인을 추가하고, 파일 이름을 정해준다.
    new MiniCssExtractPlugin({
      filename: 'common.css',
    }),
  ],

저장 및 빌드 후 elements 탭을 살펴보면 style 태그 대신 common.css 라는 이름으로 css 가 적용됨 + dist 폴더 내부에 같은 이름의 css 파일이 생긴 것을 볼 수 있다.