[React] Webpack-웹팩 기초 정리

웹팩은 모듈 번들러로 프런트엔드 프레임워크에서 가장 많이 사용되고 있다. 쉽게 말해서 웹팩은 웹을 구성하고 있는 HTML, CSS, JAVASCRIPT 등을 모두 각각의 모듈로 보고 이를 조합해서 하나로 만들어주는 도구라고 생각하면 된다. 모듈 번들러라는 단어가 어려울 수 있지만, 쉽게 이야기하면 모듈 변환기라고 생각해도 좋다.

 

https://webpack.kr/

위 그림은 웹팩 공식홈페이지에 있는 그림이다. 그림을 보면, 복잡한 파일들을 간단하게 결합시켜주는 느낌이라는 것을 한눈에 파악할 수 있다. 시작에 앞서 nodejs에 관한 환경 설정은 아래의 url로 대체한다.

 

[Web/nodejs] - nodejs 기초 총 정리

 

Webpack

프런트엔드에서 대표적인 모듈 번들러인 웹팩에 대해 알아보자. 웹팩은 복잡한 입력 모듈을 단순한 모듈로 변화해 준다. 이때, 웹팩을 결과물을 번들이라고 한다.

 

0. React 에서의 웹팩

리액트(CRA)를 개발하다보면, package.json에서 react-scripts로 프로젝트 시작하는 경험을 해보았을 것이다. 그리고 프로젝트를 시작하는 방식은 개발모드와 배포 시 사용하는, 빌드 모드가 있다는 것을 알 수있다. 아래는 package.json 중 실행과 관련 있는 script 부분이다.

 

{
  ...
  "scripts": {
    "start": "react-script start",
    "build": "react-scripts builds",
    ...
  },
  ...
}

 

scripts의 내용은 단순하다. npm run start를 실행하면, react-script start 가 실행되고, npm run build를 치면 react-scripts builds의 명령어가 실행된다. 이러한 내용을 바탕으로 조금 더 깊게 알아가 보자.

 

 

1. React 에서의 build mode 실행

아래의 명령어를 통해 build를 진행하자.

 

$ npm run build

 

빌드가 완료된 후 내부 파일을 보면, chunk.js나 main.js 같은 이름들의 번들 파일들을 확인 할 수 있다. 그리고 내부에는 index.html 파일도 확인 할 수 있다. 정리하면, 빌드 시 index.html에 반들어진 번들 파일들이 적용되어 있는 것 이라고 할 수 있다.

 

빌드를 완료 했으면, 리액트를 실행하면 된다. 이때 중요한 것은, 리액트 하나로는 실행이 안된다. 웹 서버를 만들고 그 위에 리액트 어플리케이션을 실행해야한다. 아래와 같이 웹 서버를 위한 serve 프로그램을 설치 후 실행을 하면 된다.

 

$ npm install -g serve
$ serve -s build

 

이러한 방식으로 build부분을 위의 웹 서버가 아닌, nginx나 apache 웹 서버를 react application을 올리면 배포가 바로 가능 하다. 배포관련은 여기를 눌러서 AWS에서 간단히 배포하는 방식을 알아 보자.

 

 

2. React 에서의 development mode 실행

아래의 명령어를 통해 개발 명령어를 실행한다.

 

$ npm start

 

빌드를 시작했을 때와는 먼가 느낌이 다르다. build시에는 서버를 실행하려면 serve라는 프로그램을 통해 실행을 헀다. 그러나 개발모드로 실행 시에는 서버가 바로 동작을 하는 것을 알 수 있다. 개발 모드에서는 webpack이 서버로 동작을 하기 때문이다. react 실행 시 작동 순서는 아래와 같다.

 

1. react-scripts로 실행 시 파일들을 처음 빌드하여 번들 파일로 만든다.
2. 번들 파일들이 반영된 index.html을 만든다
3. 웹 브라우저 실행 후 접속을 한다.(localhost:3000)
4. 웹팩이 준비한 index.html에서 scripts 태그의 자바스트립트 코드를 실행하여 웹 페이지에 보여준다.
5. 웹팩 서버는 새로운 파일의 생성 수정 삭제를 감시한다.
6. 처음 빌드 한 번들 파일과 비교 후 변경된 부분이 있다면, 해당 부분만 빌드한다.
7. 브라우저의 웹팩과 상호작용하여 변경 된 부분을 실시간으로 반영한다.

 

위와 같이 코딩과 동시에 서버에 반영되는 부분은 hot reloading이라고 한다. 관련 부분은 여기를 참고하자.

 

 

3. webpack.config.js

웹팩을 초입자들은 지협적인 개념까지 처음부터 공부하는 것은 효율적이지 못하다. 웹팩을 바로 시작할 수 있는 핵심적인 개념 5가지를 먼저 설명한 후에 실습을 진행해 보겠다. 웹팩에 대한 설정은 webpack.config.js을 통해 할 수 있다. 따라서 아래의 내용들을 webpack.config.js에 들어가는 내용이라고 우선 이해를 하고 글을 읽자.

 

3.1. Entry

Entry 속성은 자바스크립트 파일의 진입점이자 시작점을 지정하는 것이라고 보면 된다.

 

// webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js',
};

• 기본값은 ./src/index.js 이지만,  위의 코드처럼 다른 엔트리 포인트를 지정할 수 있다.

 

3.2. Output

output 속성은 빌드 시 적용되는 속성에 대한 설정이다. output 내부의 값으로는 path와 filename을 기본값으로 적어주면 된다.

// webpack
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
    clean: true,
  },
};

• path는 번들(=빌드=변환)된 파일을 생성할 경로를 적어주는 곳이다. 주의할 점은 상대 경로를 넣으면 찾을 수가 없다. 따라서 path라는 모듈을 넣고 resolve 매서드를 사용하여야, 절대 경로로 웹팩이 찾을 수 있다.
• filename은 생성될 파일 이름을 지정해 주는 속성이다.
• clean 부분은 안 적어도 된다. 그러나 true로 설정을 해주면, 새롭게 생성될 경로에 다른 파일들이 있다면, 다 삭제하고 새로운 파일을 생성하는 속성이다.

 

3.3. Loaders

webpack은 기본적으로 javascript와 JSON 파일만 이해한다. 따라서 그 외 .css 파일 같은 경우를 webpack이 이해하게 하려면 Loaders 부분에서 설정을 한다. 기본적으로 Loaders webpack 설정에는 test와 use로 두 가지 속성을 가진다. 아래의 예를 참고 하자.

 

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ 
    	test: /\.txt$/, 
        use: 'raw-loader' 
    }],
  },
};

• 주의 - 기본적으로 webpack에서 위와 같이 rules를 정할 때, module.rules 아래에 정의한다. 최상단의 rules에서 정의하지 않는다.
• 위의 내용을 보면 test와 use라는 필수 속성을 가진다.
• test에 있는 내용은 .txt 파일을 선택한다는 말이다.
• use는 test에서 지정한 파일들을 use에 적은 모듈을 활용해서 불러들인다는 말이다.
• 위의 코드를 풀이하면, .txt 파일이 확인되면 번들에 추가하기 전에 raw-loader을 사용하여 변환하라는 뜻이다.
• test: /\.txt$/ 주의사항 - 따옴표를 사용하지 않았다.
  
  • 'test: /\.txt$/' - .txt로 끝나는 모든 파일에서 일치하도록 한다.
  • "test: /\.txt$/" - 절대경로에서 .txt로 끝나는 단일 파일과 일치하도록 한다.

 

 

3.4. Plugins

아래 예시를 통해 이해를 해보자.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [
        new HtmlWebpackPlugin({
            title: "keyboard",
            template: "./index.html",
            inject: "body",
            favicon: "./favicon.ico",
        })
  ],
};

• title은 키보드라 하겠다. html의 head부분의 title을 넣어주는 것과 같다.
• template은 최상위 루트의 상대 경로로 지정해 준다. 
• inject : 파일을 번들했을 때, js를 바디에 넣어줄지 해더에 넣어줄지를 설정하는 것이다. 이 값 안 넣으면 html이 해더에 들어간다.
• favicon은 파이콘(웹페이지 상단의 title 옆의 아이콘)으로 사용할 위치를 적어두는 거다.

 

3.5. Mode

기본값은 production으로 none으로 지정하면 webpack에 내장된 환경별 최적화를 활성화할 수 있다.

 

module.exports = {
  mode: 'production',
};

• string = 'production': 'none' | 'development' | 'production'
• development : html, css, javascript 코드의 난독화 제공하지 않는다. 이 말은 번들 후에도 적은 코드 형태를 유지한다.
• production : html, css, javascript 코드의 난독화 제공한다. 이 말은 번들 후에 코드의 사이즈를 최대한 줄여 배포 환경에 최적화시킨다는 말이다.

위의 코드를  CLI 인수로 전달하려면 아래와 같다.

webpack --mode=development

 

 

여기까지가 웹팩의 기초 개념이다. 추가적인 내용들은 웹팩을 만들면서 추가하도록 하자.