WebPack을 사용하는 이유와 정리

Webpack이란

우선 웹팩을 간단히 설명하자면 여러 파일을 합쳐 정적인 하나의 파일로 만들어주는 tool을 웹팩이라고 한다.

아래 이미지를 보면 여러 경로로 엮인 파일들이 단순화 된다.

 

왜 Webpack을 사용해야할까?

이건 웹 개발의 역사를 알아보면 쉽다. 2000년대 초반 웹페이지는 각 페이지마다 새로운 html을 요청하면서 화면을 매번 다시 그리는 방식이었습니다. 이때 js도 마찬가지로 간단하게 DOM을 조작하는 역할 뿐이고 기능적으로 많은 역할이 필요하지 않지만 인터넷의 규모가 커지고 프론트/백의 구조로 구분되고, 이러한 아키텍쳐에서 SPA의 개념이 발전하며 수백가지의 js 파일이 포함되어 더 이상 이전의 방식으로 유지될 수 없었습니다.

 

따라서 웹팩이 등장하기 시작했고 총 3가지 이유로 정리할 수 있습니다.

 

웹팩이 필요한 이유 | 웹팩 핸드북

 

 

변수 관리

js의 변수 유효 범위는 기본적으로 전역으로 관리되었습니다. 따라서 같은 이름의 변수가 두번 선언되었다면 변수값이 이상하게 변할 수 있었습니다.

이러한 문제점을 웹팩에서는 ES6 문법과 웹팩의 모듈 번들링(변수를 각 파일별로 관리할 수 있게함)을 사용함으로써 해결하였습니다.

 

 

웹개발 & 웹 애플리케이션의 빠른 로딩 속도와 성능을 위한 도구

우리가 HTML문서로 계속 작업해봤다면 html 내용이 수정되었다면 다시 새로고침해서 변경사항을 확인하였습니다.

이러한 방식은 다른 컴파일 언어인 c/c++같이 계속해서 프로그램 종료 => 컴파일 => 재실행시키는 것처럼 반복적인 작업이 있었습니다.

 

그리고 여러 성능적인 처리(압축, 변환 등등..)를 하는 과정이 필요하였습니다. 이러한 성능처리는 웹의 초기 로딩속도와 네트워크단에서 요청하는 횟수를 줄일 수 있기때문에 비용적으로, 성능적으로 배포시 마다 작업이 필요했습니다. 이러한 작업을 수행해주는 비슷한 라이브러리인 Gulp 라이브러리도 있으며 조금 더 쉽고 작은 규모의 프로젝트에서 사용될 수 있습니다.

 

다시 돌아와서 이러한 문제점을 웹팩에서는 미사용 코드를 관리, 여러 파일을 하나의 파일로 묶어줍니다. 이후 파일 요청시 하나의 파일로 가볍고 빠르게 전송할 수 있게함으로써 해결하였습니다.

 

상세하게 설명해준 부분은 참고하여 요약하였습니다.

웹팩으로 해결하려는 문제 | 웹팩 핸드북

 

 

간단하게 사용하기

webpack.config.js 파일을 사용하였고 기본 속성들만 안다면 자료가 많아 크게 어려움은 없었습니다.

• Entry : 웹팩을 사용하여 파일을 번들링하기 위한 진입점이며 하나의 파일로 합쳐지는 root,main이라고 이해했습니다
• Output : 웹팩을 실행시킨 뒤 결과물에 대한 파일 이름, 경로 등을 정의해줄 수 있는 속성입니다.
• Loader : js파일이 아닌 다른 웹 자원에 대한 작업을 수행할 수 있게 해주는 속성입니다.
  • EX) css-loader(css파일 변환), file-loader와 url-loader(이미지,폰트 변환)
• plugin : 웹팩의 기본 속성들에 대해 부가적인 기능을 제공합니다.

 

간단하게 실습한 코드입니다.

 

npm 설치나 설정은 아래 블로그 링크를 걸어두었습니다.

 

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpe?g|gif)$/,
        loader: 'file-loader'
      },
      {
      test: /\.(png|svg|jpe?g|gif)$/,
      loader:'file-loader',
      options: {
        name: '[hash].[ext]'
      },
      {
        test: /\.(png|svg|jpe?g|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      favicon: './static/asset/favicon.ico',
      template: './static/index.html',
      chunks: ['css', 'index', 'app', 'system', 'monitor']
    })
  ]
}

 

 간단하게 어떠한 loader가 있는지 어떠한 loader가 자주 사용되는지에 대해서만 실습해보았고 정리하였습니다

 

아래 블로그 내용에서 보시면 금방 익힐 수 있다고 생각합니다.

Webpack 완전정복하기!!

 

 

발생한 문제들

- 명령어 실행이 제대로 안됐을 때

Zsh: command not found: webpack

커맨드라인에서 webpack 명령어가 실행되지 않을 때