ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [Babel/Webpack] 바벨과 웹팩을 이용한 ES6 환경 구축
      카테고리 없음 2020. 5. 26. 19:42

      Webpack (웹팩)

      1. 개념

      자바스크립트 코드가 많아지면 하나의 파일로 관리하는데 한계가 있다. 그렇다고 여러개의 파일을 로딩할 때의 단점도 존재한다.

      단점 1) 여러개의 파일을 브라우저에 로딩하는 만큼 네트워크 비용을 치뤄야 한다.

      단점 2) 각 파일은 서로의 범위를 침범하면 안되지만, 잘못 작성할 경우 변수 충돌의 위험성이 있다.

      웹팩은 이러한 배경에서 이해할 수 있다.

      기본구조에서 Module, Bundle, Entry, Output, Mode, Plugin 에 대해 개념을 자세히 정리하려 한다.

      2. 기본구조

      image

      image

      Module

      Bundle

      참조관계에 있는 모듈을 모아 하나의 파일로 묶어준다.

      • 중요한 이유
        • 모든 모듈을 로드하기 위해 검색하는 시간이 단축된다
        • 사용하지 않는 코드를 제거해준다
        • 파일의 크기를 줄여준다

      Entry

      application이 많은 모듈들로 구성이 되어있고 복잡한 참조를 이룬다.

      참조관계를 해석해 의존성 그래프를 만든다.

      의존성 그래프를 만들기 위해 어떤 모듈을 시작점으로 해석할지 결정한다.

      image

      Output

      Entry에서 의존성 그래프 만들고 번들과정을 거치면 Output에 설정된 정보를 기반으로 번들된 파일이 생성된다.

      image

      Mode

      모드키를 통해 빌드환경을 구분지을 수 있다.

      번들과정에서 개발과정인지 프로덕션과정인지에 따라 작업환경이 달라지게 설정할 수 있다.

      image

      Loader

      웹팩은 모든 파일을 모듈로 관리한다.

      즉, javascript 파일 뿐 아니라 이미지, 폰트 등 전부 모듈로 관리한다.

      그러나, javascript 밖에 모른다.

      따라서, javascript 가 아닌 파일을 웹팩이 이해할 수 있도록 변경해야한다. 이와 같은 역할을 하는 것이 로더이다.

      로더는 test와 use키로 구성된 객체로 설정할 수 있다.

      • test : 로딩할 파일을 지정
      • use : 적용할 로더를 설정

      image

      Plugin

      번들링의 전체적인 고자어에 여러가지 일들을 할 수 있다.

      image

      3. 설정

      i. Webpack 설치

      npm install webpack webpack-cli --save-dev

      ii. babel-loader

      Webpack이 모듈을 번들링할 때 Babel을 사용하여 ES6+ 코드를 ES5 코드로 트랜스파일링하도록 babel-loader를 설치한다.

      pm install --save-dev babel-loader

      iii. babel-loader

      npm script를 변경하여 Babel 대신 Webpack을 실행하도록 수정하자. 아래와 같이 package.json 파일의 scripts를 변경한다. 

      "scripts": {
    "build": "webpack -w"
  },

      iv. webpack.config.js

      webpack.config.js은 Webpack이 실행될 때 참조하는 설정 파일이다. 프로젝트 루트에 webpack.config.js 파일을 생성하고 아래와 같이 작성한다.

      const path = require('path');

module.exports = {
  // enntry file
  entry: './src/js/main.js',
  // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src/js')
        ],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  },
  devtool: 'source-map',
  // https://webpack.js.org/concepts/mode/#mode-development
  mode: 'development'
};

      v. webpack 실행

      Webpack을 실행하여 트랜스파일링 및 번들링을 실행한다. 트랜스파일링은 Babel이 실행하고 번들링은 Webpack이 실행한다. 만약 이전에 실행시킨 빌드 명령이 실행 중인 상태라면 중지시키고 다시 아래 명령을 실행한다.

      npm run build

      실행 결과 dist/js 폴더에 bundle.js이 생성되었다. 이 파일은 main.js, lib.js 모듈이 하나로 번들링된 결과물이다.

      vi. index.html 수정

      index.html을 아래와 같이 수정하고 브라우저에서 실행해 보자.

      <!DOCTYPE html>
<html>
<body>
  <script src="./dist/js/bundle.js"></script>
</body>
</html>

      4. zero configuration?

      특별한 설정서버를 사용하지 않고, 이용가능한 인터넷프로토콜 네트워크를 자동적으로 작성 하는 일종의 기법

      • 웹팩 명령어만 실행해도 자주사용되는 웹팩설정 기본적으로 적용시켜준다.

      • 사용방법 ?

        • src

          엔트리의 경로를 src안에 index.js 파일 이름으로 준비해야 동작

        • dist

          번들파일이 위치한 장소도 dist 폴더 안에 있어야 한다.
          또한, main.js 파일 이름으로 준비해야한다.

      👉 엔트리와 아웃풋 설정 따로 하지 않아도 번들링된다. 

      npx webpack --target-node

      번들 파일이 잘 만들어졌는지 실행

      node ./dist/main.js

      Babel

      IE와 다른 구형 브라우저 ES6의 화살표 함수와 ES7의 지수 연산자를 지원하지 않을 수 있다.

      Babel을 사용하면 위 코드를 아래와 같이 ES5 이하의 버전으로 변환할 수 있다.

      i. Babel CLI 설치

      npm i @babel/cli @babel/core

      ii. babelrc 설정 파일 작성

      Babel을 사용하려면 @babel/preset-env을 설치해야 한다. 

      npm install --save-dev @babel/preset-env

      iii. 트랜스파일링

      Babel을 사용하여 ES6+ 코드를 ES5 이하의 코드로 트랜스파일링하기위해 package.json 파일에 scripts를 추가한다.

      "scripts": {
    "build": "babel src/js -w -d dist/js"
  },

      -w

      타깃 폴더에 있는 모든 파일들의 변경을 감지하여 자동으로 트랜스파일한다. (--watch 옵션의 축약형)

      -d

      트랜스파일링된 결과물이 저장될 폴더를 지정한다. (--out-dir 옵션의 축약형)

      iv. Babel 플러그인

      Babel을 사용하려면 @babel/preset-env을 설치해야 한다. 

      npm install --save-dev @babel/plugin-proposal-class-properties

      package.json 파일의 devDependencies에 설치된 것 확인 가능하다.

      설치한 플러그인은 .babelrc 파일에 추가해 주어야 한다.

      {
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

      터미널에서 아래 명령으로 트랜스파일링을 실행

      npm run build

      트랜스파일링에 성공하면 프로젝트 루트에 dist/js 폴더가 자동 생성되고 트랜스파일링된 main.js와 lib.js가 저장된다.

      트랜스파일링된 main.js를 실행

      node dist/js/main

      참고

      http://jeonghwan-kim.github.io/js/2017/05/15/webpack.html

      https://poiemaweb.com/es6-babel-webpack-1

      https://poiemaweb.com/es6-babel-webpack-2

      반응형
    Designed by Tistory.

    티스토리툴바