개발 이야기/Webpack

Webpack4, Babel 최신 설정

석구석구 2020. 3. 22. 02:24
Webpack 설정으로 인해 어려움을 겪고 있는 사람들을 위해 이 글을 씁니다.

 

프런트엔드 개발에 있어 웹팩은 필수조건이 되었습니다.

많은 프런트엔드 개발자들이 웹팩을 이용하는 이유는 "빌드를 이용한 프로젝트 최적화"라고 정리할 수 있을 겁니다.

빌드라는 과정을 통해 웹팩은 정말 많은 일(정말 정말 정말!)을 할 수 있고, 당연히 그에 따른 설정도 굉장히 많습니다.

공식문서에 웹팩의 어메이징 한 기능들에 대한 설명이 아주 잘 나와 있지만 스타터에게는 이도 쉽지가 않습니다.

하지만 겁먹지 마세요. 차근차근 따라 하다 보면 그리 복잡하지 않습니다. 

그리고 웹팩과 바벨의 버전이 올라가면서 설정이 더욱더 간단해졌으니깐요.

웹팩이란 무엇인가
webpack is a static module bundler for modern JavaScript applications.

공식문서에서는 위와 같이 웹팩을 번들러라 소개하고 있습니다.

간단하게 이것이 무슨 말인가 하면, 과거에는 하나의 페이지를 로드하기 위해

<script src="jquery.js"></script>
<script src="moment.js"></script>
<script src="util.js"></script>
<script src="ui.js"></script>
<script src="page.js"></script>

이와 같이 여러 스크립트들을 로드했습니다. 하지만 웹팩을 이용하면

<script src="bundle.min.js">

이처럼 하나의 스크립트로 5개의 스크립트들을 묶을 수 있습니다. 이렇게 묶는 과정을 번들이라 하죠.

개인적으로 중요하게 생각하는 핵심 가치 중 하나는

하나의 처리 단계(전처리, 후처리)가 생기면 많은 일을 할 수 있다.

이렇게 묶어주는 하나의 처리 단계가 생김으로서 웹팩은 엄청난 일들을 할 수 있게 됩니다.

  1. page.js 파일에서 ES6 문법을 사용했다면 ES5 환경에서도 동작하는 코드로 변환할 수 있습니다. (트랜스 파일링)
  2. 브라우저마다 지원하는 자바스크립트의 버전이 다르기 때문에 하위 브라우저나 특정 브라우저에는 없는 공식 기능들을 추가할 수 있습니다. (폴백, 폴리필/ 심)
  3. page.js 파일에서 util.js 파일과 profile.png 파일을 사용했다면 이러한 관계를 이용해 세 개의 파일을 하나의 파일로 묶을 수도 있고, 1 + 2 (다이내믹 로딩)로 묶을 수도 있습니다.
  4. 타입 스크립트나 리액트 등의 다양한 자바스크립트 상위 셋 문법을 사용할 수 있습니다. 왜냐하면 개발자가 사용한 코드를 웹팩이 자바스크립트로 변환해 줄 거니깐요.
  5. 웹 최적화를 해줍니다. 파일의 압축, 난독화, 로딩, 이미지 스프라이트까지 설정 이후에는 분할하고 압축하는 모든 과정에 개발자가 개입할 필요가 없습니다.

이처럼 다양한 웹팩의 역할을 이용하면 프런트엔드 영역을 제대로 설계할 수 있게 됩니다.

와 닿지 않는다면 일단 웹팩을 써보세요. ; )

Webpack 사용하기

이제 본격적으로 웹팩을 사용해 봅시다.

  1. NodeJS를 설치합니다.
  2. npm을 설정할 폴더를 하나 만듭니다.
  3. 웹팩 설정 파일을 만듭니다.
  4. 개발합니다.

엄청나게 간단하죠.

  • 웹팩이 동작할 NodeJS를 설치합시다.
  • 폴더를 하나 만든 후 해당 위치에서 터미널을 열고 다음과 같이 입력합니다. 그럼 package.json파일이 생성되고 웹팩이 설치될 겁니다.
npm init -y

npm은 Node Package Manager의 약자입니다. (Java의 maven, python의 pip라 생각하시면 됩니다.)

만약 npm에 익숙하지 않다면 이제부터라도 익숙해져야 합니다. 무궁무진한 외부 자바스크립트 생태계와 본인의 프로젝트를 연결할 수 있으니깐요.

  • 웹팩을 설치해 줍니다.
npm install webpack webpack-cli --save-dev

npm을 통해 webpack, webpack-cli 두 가지 모듈을 설치했습니다.

package.json 파일을 열어보면 개발 의존성 항목에 방금 설치된 두 개의 모듈과 버전을 확인할 수 있습니다.

--save-dev는 package.json의 개발 의존성 항목에 쓰라는 의미입니다.

  • webpack.config.js 파일을 수동으로 생성해 줍니다. 그리고 해당 파일에 아래와 같이 입력해 주세요.
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build'),
  },
};

무슨 의미인지는 아직 파악하지 않아도 됩니다. 그저 해당 파일이 "웹팩의 설정 파일"이라는 것만 알아두세요.

  • src 폴더를 만들고 해당 폴더에 index.js 파일을 만들고 아래와 같이 코딩해 봅니다.
import $ from 'jquery'

$('<div>축하합니다. 당신의 웹팩 첫 경험입니다.</div>').appendTo($('body'))

제이쿼리를 통해 dom을 만들고 이를 body에 추가하는 간단한 내용이네요.

  • index.html 파일을 만들고 아래와 같이 입력해 줍니다.
<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="./build/main.js"></script>
  </body>
</html>
  • 이제 끝났습니다. 웹팩을 실행시키기만 하면 됩니다.

실행은 3번 단계에서 webpack과 같이 설치한 webpack-cli를 통해 실행합니다. package.json 파일에 다음과 같이 추가해 주세요.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build" : "webpack"
  },

이제 터미널에서 아래와 같이 치면 웹팩이 빌드를 할 거예요.

npm run build

잘 되셨나요? 아마 잘 안됐을 겁니다.

Module not found: Error: Can't resolve 'jquery'

우리가 index.js 에서 사용한 jquery 모듈이 없다는 내용입니다.

  • jquery를 설치해 봅시다.
npm install jquery --save

npm을 통해 jquery를 설치하였고 이에 대한 내용은 package.json에 추가되었습니다.

이제 다시 웹팩을 실행시켜 봅시다.

npm run build

문제가 없다면 build 폴더에 main.js라는 파일이 만들어집니다.

이제 index.html을 열어보면 우리의 첫 번째 웹팩 프로젝트가 성공했음을 알 수 있습니다.

간단하죠.

하지만 우리가 함께한 내용은 결코 간단하지 않습니다.

  • main.js 는 압축되었고 최적화되었습니다.
  • npm을 통해 외부 자바스크립트 모듈인 jquery를 설치하였고 package.json 파일을 통한 의존성 관리가 가능해졌습니다.
  • index.html에서 <script src="./jquery"></script> 방식이 아닌 main.js라는 하나의 파일 안에 jquery를 포함시켰습니다.
  • index.js내에서 import 구문을 사용했습니다.

시작이 반이라 했으니 여러분은 훌륭한 프런트엔드 개발 환경을 반 이상 만들어 낸 것입니다.

여기서 한 발자국 더 나아가 봅시다.

index.js 에 다음과 같이 작성해 봅니다.

const printName = (name) => {
	alert(`나의 이름은 ${name}입니다.`);
}

printName('이석규');

단지 3줄의 코드이지만 ECMAScript 2015 자바스크립트 문법이 사용되었습니다.

const, arrow function, template literals

이제 다시 실행시켜봅시다.

npm run build

아마도 우리의 훌륭한 크롬에서는 index.html이 문제없이 열릴 겁니다.

하지만 IE 브라우저에서는 문제가 발생활 겁니다. 왜냐하면 우리가 사용한 ECMAScript 2015의 문법들이 IE의 특정 버전에서는 동작하지 않기 때문입니다.

그렇다고 항상 하향 평준화된 자바스크립트 문법을 사용할 수는 없죠.

이럴 때 우리에게 필요한 것이 babel이라는 친구입니다. 바벨은 우리가 작성한 코드를 특정 버전의 자바스크립트에 맞추어 변환해 줍니다.

심지어 특정 브라우저에 맞추어 변환할 수도 있습니다. 대단한 친구죠. 웹팩 안에서 바벨을 편리하게 사용할 수 있습니다..

  • webpack.config.js를 다음과 같이 조금 변경해 줍니다. 
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "build")
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        include: /(src|node_modules)/,
        use: [
          {
            loader: "babel-loader"
          }
        ]
      }
    ]
  }
};

대단한 내용은 아니고, 모듈 -> 룰 설정에 바벨 로더라는 친구가 추가되었습니다.

  • 웹팩에서 사용할 바벨 로더와 바벨, 바벨 프리셋을 설치해줍니다. 
npm install --save-dev babel-loader @babel/core @babel/preset-env

package.json을 살펴보면 방금 설치된 바벨 관련 모듈들이 보일 겁니다. npm 정말 편하죠.

나중에 배포할 때에도 package.json 파일을 참조하여 의존하고 있는 모듈들을 설치할 수 있습니다.

  • babel.config.json 파일을 만들어 주고 아래와 같이 내용을 작성해줍니다.
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

바벨 역시 다양한 설정이 가능합니다. 설정에 설정이죠. 일단 위와 같이 간단하게 작성하면 됩니다.

바벨 프리셋은 이렇게 간단히 사용하라고 미리 만들어준 패키지니깐요.

이제 다시 웹팩을 실행해보면 우리가 작성한 코드가 ie11에서도 문제없이 동작하는 것을 알 수 있습니다.

1. 코드 작성 -> 2. 바벨이 우리가 작성한 코드를 지정한 버전에 맞게 변환 -> 3. 번들

웹팩은 코어 레벨에서 2~3번의 과정을 진두지휘합니다.

다양한 로더들을 통해 2~3번이 아니라 더 많은 과정을 웹팩에게 시킬 수 있죠.

웹팩에 대해 조금 감이 오셨나요?!

이 외에도 웹팩을 통해 TypeScript, React, SCSS, Lint 등의 다양한 기능들을 추가 사용하고, 프로젝트 버전 관리와 개발서버 구축까지도 할 수 있습니다.

리액트 개발자라면 react -reate-app을 사용하면 처음 웹팩 설정을 따로 하지 않아도 되지만 곧 실제 개발을 하다 보면 직접 수정해야 하는 상황이 벌어집니다.

 

읽으신 분들에게 조금이라도 도움되었기를 바랍니다

 

'개발 이야기 > Webpack' 카테고리의 다른 글

typescript, eslint, webpack Alias 설정하기  (0) 2020.02.25
Webpack 설정 파일 예시  (0) 2020.02.17
html 에서 변수, 정적파일들 사용하고 빌드에 포함하기.  (0) 2020.02.17
scss로 변수 보내고 scss에서 변수 사용하기  (0) 2020.02.13

'개발 이야기/Webpack'의 다른글

  • 현재글Webpack4, Babel 최신 설정

관련글

댓글

티스토리툴바