Webpack 웹팩

Webpack

웹팩 공식문서에서는 웹팩을 자바스크립트 애플리케이션을 위한 정적 모듈 번들러라고 소개하고 있습니다. 여기서 번들러란 의존성이 있는 모듈들을 하나의 파일로 통합시켜주는 도구라고 말할 수 있습니다.

특징

한번에 많은 요청을 하지 않아도 됩니다.
예를 들어 한 웹페이지에서 사용하는 자바스크립트 파일이 10개정도 된다고 가정해본다면 웹 페이지가 로드될 때 자바스크립트 파일 10개롤 모두 네트워크를 통해 요청해서 받아와야 해서 네트워크 병목현상이 발생할 수 있습니다. (물론 10개의 파일 정도로 병목현상이 발생하지는 않고 단순한 예시이다.)
모듈 단위로 개발하여 유지보수성을 높일 수 있습니다.
하나의 파일에 모든 자바스크립트 코드가 있다고 할때 그 코드가 몇 천 라인, 몇 만 라인인지는 모르지만 우리가 수정해야 할 코드에 접근하는데 어려움을 느낄 수 있는데 번들러를 사용하면 우리도 이해하기 쉽도록 코드를 모듈 단위로 구분해 가독성과 유지보수성을 효율적으로 개선할 수 있습니다.

웹팩 설치

이제 웹팩을 설치해 바벨과 연결하고 바벨만 따로 사용할 수도 있지만 웹팩과 연결하면 바벨이 코드들을 트랜스파일링 하면서 웹팩을 통해 모듈들을 번들링할 수 있기 때문에 굉장히 효율적입니다.

다음과 같이 웹팩과 css나 이미지 등을 사용할 수 있게 도와주는 모듈들을 설치해줍니다.

$npm i -D webpack webpack-cli webpack-dev-server
$npm i -D babel-loader css-loader file-loader
$npm i -D html-webpack-plugin mini-css-extract-plugin
$npm i -D sass sass-loader

각 모듈은 다음과 같은 역할을 한다.

webpack: 웹팩 모듈
webpack-cli: 터미널에서 웹팩 명령어를 사용할 수 있게 도와줍니다.
webpack-dev-server: nodemon과 같이 웹팩 환경에서 개발서버를 생성
babel-loader: 웹팩과 바벨을 연동
css-loader: 웹팩이 css파일을 읽을 수 있도록 도와줌
file-loader: 웹팩이 파일을 로딩할 수 있도록 도와줌 (이미지를 로딩하는데 사용)
html-webpack-plugin: 번들링된 html파일에 css와 js파일들을 추가해줍니다.
mini-css-extract-plugin: style-loader를 대체하며 html내의 style태그 대신 별도의 css파일로 생성해줍니다.
sass-loader: 웹팩이 sass파일을 읽을 수 있도록 도와줍니다.

sass도 사용하기 위해 sass-loader를 추가했습니다. 이제 본격적인 웹팩 설정을 하면 됩니다.

웹팩 설정

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

웹팩에서 기준으로 사용할 html파일을 생성해줍니다.

src/index.js

const root = document.getElementById('root');
root.innerHTML = '웹팩 설정하기!';

웹팩에서 기준으로 사용할 js파일 또한 생성해줍니다.

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const prod = process.env.NODE_ENV === 'production';

module.exports = {
  // 모드에 따라 웹팩에서 내장 최적화 제공
  mode: prod ? 'production' : 'development',

  // 소스 맵 생성 여부 및 방법 설정
  devtool: prod ? 'hidden-soure-map' : 'eval',

  // 번들링을 시작할 파일
  entry: {
    index: './src/index.js',
  },

  // 다양한 모듈들(js, image, css 등)을 처리하는 방법 결정
  module: {
    rules: [
      {
        // 처리할 모듈 형식 결정
        test: /.js$/,
        // 이 모듈에 사용할 loader
        use: 'babel-loader',
        // 제외할 파일들
        exclude: /node_modules/,
      },
      {
        test: /\.(sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/dist/static/style/',
            },
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpg|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'static/images',
            },
          },
        ],
      },
    ],
  },

  // 빠르게 개발할 수 있도록 개발서버 제공
  devServer: {
    historyApiFallback: true,
    inline: true,
    port: 3000,
    hot: true,
    publicPath: '/',
  },

  // 번들링 된 파일이 생성될 위치 설정
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'static/js/bundle.js',
  },

  // 적용할 플러그인 목록
  plugins: [
    new HtmlWebpackPlugin({ template: `./public/index.html` }),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({ filename: 'static/style/main.css' }),
  ],
};

mode: production, development, none 세가지 옵션을 사용할 수 있는데 사용한 옵션에 따라 웹팩에서 내부적으로 최적화를 해준다. 보통 개발시에는 development, 배포시에는 production을 사용합니다.
devtool: 소스맵 생성 스타일을 결정할 수 있다. 여러 옵션들이 있으며 배포시에는 소스맵을 숨기는게 좋으므로 hidden-soure-map을 사용했습니다.
entry: 번들링을 시작할 파일을 결정할 수 있다. 멀티 페이지 번들링시 여러 파일을 설정할 수도 있습니다.
module: 다양한 모듈들을 처리하는 방법들을 결정한다. js파일, ts파일을 포함한 이미지파일, 스타일 파일 등 웹팩을 통해 번들링 되는 모든 파일들의 처리 방법을 설정하며 좀전에 설정한 바벨 또한 이 곳에서 설정한다. module을 설정할 때 중요한 부분은 loader를 읽을때 오른쪽에서 왼쪽으로 loader가 실행되기 때문에 sass-loader의 경우 css-loader보다 오른쪽에 위치시켜야합니다. (typescript의 경우에는 babel-loader 오른쪽에 ts-loader를 위치시켜야 한다.)
devServer: 개발 서버에 대한 설정을 할 수 있다. 에러처리, 포트 설정, 기본 path 등 여러 옵션을 설정할 수 있으며 자세한 옵션은 다음 페이지를 참고하면 좋습니다.
output: 웹팩을 통해 최종적으로 번들링 된 파일을 저장할 위치를 설정합니다.
plugins: 웹팩에 적용할 플러그인들을 설정합니다.

이제 프로젝트에서 웹팩을 실행시키기 위한 명령어도 설정해야 합니다.

package.json

"scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "NODE_ENV=production webpack --mode production --env=build"
  }

다음과 같이 개발서버를 실행하기 위한 dev명령어와 빌드를 위한 build명령어를 설정해 줬습니다.

이제 설정한 이미지, sass가 모두 동작하는지 확인하기 위해 이미지 파일과 sass파일도 추가시켜 줬습니다.

style.scss

body {
  background-color: #b2dfdb;
}

배경색을 민트색으로 지정해줬다.

src/index.js

import './style.scss';
import image from './image.jpg';

const root = document.getElementById('root');

const img = document.createElement('img');
img.src = image;
img.alt = 'image';

root.appendChild(img);

그리고는 scss파일과 이미지파일이 적용되는지 확인해야 하기 때문에 사진을 넣어줄 수 있습니다.

사실 평소에 웹팩과 바벨을 처음부터 커스텀 셋팅을 할 일이 많지 않다.
대부분 React + Nextjs 조합을 통해 개발을 진행했기 때문이다. 그래도 웹팩과 바벨에 대한 개념과 원리를 알게 되면 추후에 복잡한 개발환경 설정에도 도움이 될 수 있다.

'프로그래밍 개발 > 프론트엔드 개발자 기본 지식' 카테고리의 다른 글

HTML/CSS (0)	2022.04.12
Babel 바벨 (0)	2022.04.12
Npm (0)	2022.04.12
ECMAScript2015(ES6) (0)	2022.04.10
DOM API (Web API) and Concept (0)	2022.04.10

Webpack 웹팩

Webpack

'프로그래밍 개발 > 프론트엔드 개발자 기본 지식' 카테고리의 다른 글

댓글

티스토리툴바

Webpack 웹팩

Webpack

'프로그래밍 개발 > 프론트엔드 개발자 기본 지식' 카테고리의 다른 글

관련글

댓글

티스토리툴바