Webpack 최소설정 직접해보기

사실 create-react-app으로 하면 거기에 웹팩과 다양한 설정들이 이미 들어가있어서 우리가 직접 세팅할 필요는 없지만,,,

다양한 설정을 위해서는 웹팩에 기본정도는 알아야 할것 같아서 이를 간단하게 정리해봤다.

 

 

Webpack이란 무엇인가?

 

여러 컴포넌트와 다양한 파일들을 묶어서 한 덩어리로 만들어 주는 모듈 번들러(Module bundler)이다.

 

하단의 이미지 왼쪽의 input과 같이 다양한 종류의 파일들을 묶는 번들링이라는 과정을 거쳐 아웃풋으로 오른쪽과 같은 파일을 만들어낸다.

예시)

• 다양한 파일들을 번들링하여 하나로 합쳐진 js파일 혹은 여러개로 나눠진 js파일을 만들수 있다.
• sass라고하는 css preprocessor를 통해서 만들어진 파일을 css로 변환
• 이미지를 최적화해서 새로운 이미지를 출력하기도 함

 

장점: 번들링한 파일만 네트워크에서 받아오면 웹브라우저에 나타나는게 가능하다(그렇지 않을경우 여러개의 파일을 모두 다 받아와야함-네트워크에 부담, 속도 문제 등등)

 

웹팩의 Core Concept

• entry
• output
• loader
• plugin

 

entry: 진입점 파일.

webpack document entry ex js객체로 되어있다

output:번들링 한 뒤 어떻게 output파일로 만들꺼야, 어떤 디렉터리에다가 파일을 출력할 지

webpack document output ex 객체로 되어있고, 출력될 경로가 주어져있음

 

loader: loader설정영역(다양한 일들을 하는 파일들을 loader형식으로 주입해서 사용. 어떤 loader를 사용할지, 그 주입한 loader에서 어떤설정을 넣어 줄지 등)->입력된 파일들을 어떻게 처리할 것인가에 대한 소프트웨어(Entry에 적용)

-babel과 같은 트랜스 파일러 등

webpack document loader ex 종류가많지만 예제에서는 module이라는 형태에 rules배열에 loader를 정의해주었다.

plugin:  loader에서 처리된 파일들을 최종적으로 어떻게 출력 결과로 만들어 낼것인가에 대해 관여하는 프로그램(Output)에 적용

-이미지 최적화 프로그램, 소스코드 압축 프로그램

webpack document plugin ex 종류가 다양. 예제에서는 HtmlWebpackPlugin이란걸 사용. 플러그인에 따라 설정방법이 다양하므로 플러그인 문서 참고

설정 하는 방법들이 매우 다양하게 있지만 boilerplate의 형식으로 주로 사용한다(보일러 처럼 튼튼하게 만들어져있는 설정, 이것만 있으면 왠만한건 구조체계에서 내용만 추가하면 된다 뭐 이런의미. 몇가지 자주는 loader, plugin들이 세팅 되어이음)

 

 

 

하지만 나는 잘 모르니까 그냥 최소 설정으로 해보자

 

Webpack 최소설정

 

npm init을 할 시 package.json파일을 만든다.(이경우에 하나씩 옵션을 넣어야함)

npm init -y 를 할시 자동으로 default값을 넣어준다.

 

npm i -D webpack webpack -cli

위와 같이 build 'webpack' 입력

npm run build 를 실행하면 오류가 뜬다.

webpack은 최소한의 옵션을 설정해줘야함

밑이 사진같이 만들어준다

 

 

css로더설치

npm i -D css-loader

npm i -D style-loader

 

 

file로더 설치

npm i -D file-loader

 

html 플러그인 설치

npm i html-webpack-plugin -D

플러그인은 생성자 함수로 가져와야함

const HtmlWebpackPlugin = require("html-webpack-plugin");

 

clean 플러그인 설치-전에 빌드할때 남아있던 파일을 지워줌

npm i -D clean-webpack-plugin

const {CleanWebpackPlugin} = require("clean-webpack-plugin");

아래와 같이 추가

plugins: [

    new HtmlWebpackPlugin({

      template: "./src/index.html",

    }),

    new CleanWebpackPlugin(),

  ],

 

 

 

 

출처:김정환님 유튜브, 김민태 프론트엔드강의