1. 2일 전

    Date, JSON 객체

    Date, JSON 객체의 이모저모

  2. 19일 전

    ES6 - Generator

    Generation 함수 사용하기

  3. 26일 전

    ES6 - iteration & for ... of

    iteration과 활용

  4. 1달 전

    ES6 - Symbol

    왜 Symbol이 필요할까?

  5. 1달 전

    ES6 - Rest/Spread 연산자

    코드를 더 간결하게

  6. 2달 전

    ES6 - Promise

    콜백 지옥을 벗어나자

  7. 2달 전

    Webpack(3) - Plugin

    Plugin으로 더 강력한 Webpack

  8. 2달 전

    ES6 화살표 함수

    화살표 함수에 대해 깊게 이해하기

  9. 2달 전

    32. 이벤트

    이벤트 루프

  10. 2달 전

    JS가 객체지향언어라 할 수 있는 이유

    대체가능성, 내적동질성

  11. 3달 전

    Webpack(2) - Loader

    Loader로 다양한 파일 다루기

  12. 3달 전

    비동기 처리

    JavaScript에서 비동기 처리

  13. 3달 전

    19. 클로져

    JavaScript에서 클로저란?

  14. 3달 전

    18. 실행컨텍스트

    JavaScript에서 실행컨텍스트

  15. 3달 전

    17. this

    JavaScript에서 this

  16. 3달 전

    Webpack(1) - 기본편

    Webpack 대한 기본 이해

  17. 4달 전

    Babel(4) - polyfill

    더 많은 브라우저 지원하기

  18. 5달 전

    Babel(3) - 설정편

    설정하는 다양한 방법

  19. 5달 전

    Babel(2) - 실행편

    실습을 통한 더 깊은 이해

  20. 5달 전

    Babel(1) - 기본편

    babel에 대한 기본 이해

Tamm자바스크립트 웹 개발 환경을 좋아하고 사람들에게 재미를 주는 것에 관심이 많은 개발자 입니다.

Webpack(1) - 기본편

Webpack 대한 기본 이해

featured image thumbnail for post Webpack(1) - 기본편

Webpack | PoiemaWeb

Webpack은 자바스크립트 파일을 번들링하는 모듈 번들러이다. 여기서 모듈은 각종의 리소스 파일을(js, png, css 등) 말하고, 번들은 웹팩 실행후 나오는 결과 파일이다. 하나의 번들 파일은 여러 모듈로 만들어진다.

Webpack 설치


$ yarn add --dev webpack webpack-cli

번들링을 할 때 필요에 따라 코드를 babel로 트랜스 파일링 할 필요가 있다.

$ yarn add --dev babel-loader @babel/core @babel/preset-env

우리가 웹팩으로 빌드할 소스 파일을 생성하자.

  • src/index.js

    import { pi, power, Foo } from "./js/lib";
    
    console.log(pi);
    console.log(power(pi, pi));
    
    const f = new Foo();
    console.log(f.foo());
    console.log(f.bar());
    
  • src/js/lib.js

    export const pi = Math.PI;
    
    export function power(x, y) {
    // ES7: 지수 연산자
    return x ** y;
    }
    
    // ES6 클래스
    export class Foo {
    // stage 3: 클래스 필드 정의 제안
    constructor() {
      this.private = 10;
    }
    
    foo() {
      // stage 4: 객체 Rest/Spread 프로퍼티
      const { a, b, ...x } = { ...{ a: 1, b: 2 }, c: 3, d: 4 };
      return { a, b, x };
    }
    
    bar() {
      return this.private;
    }
    }
    

아래 명령어를 통해서 webpack을 실행하자. 아무런 옵션을 주지 않고 실행하면 기본적으로 src/index.js 파일을 index 파일로 읽고 dist/main.js 파일을 실행한다.

$ yarn webpack

dist/main.js 파일을 보면 앞부분은 webpack에서 기본적으로 생성하는 내용이고 끝 부분에 우리가 작성한 index.js 파일과 lib.js 파일이 하나의 파일안에 포함되어 있는 것을 확인할 수 있다.

Webpack 설정


프로젝트 루트에 다음과 같이 webpack 설정 파일을 생성하자.

  • webpack.config.js

    const path = require("path");
    
    module.exports = {
    // enntry file
    entry: "./src/index.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"],
            },
          },
        },
      ],
    },
    devtool: "source-map",
    // https://webpack.js.org/concepts/mode/#mode-development
    mode: "development",
    };
    

webpack 명령어를 스크립트에 추가하자.

  • package.json

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

한 번 더 아래 처럼 명령어를 실행하면, 이번에는 우리가 설정한 webpack.config.js 내용대로 번들링 된다. 결과물로 dist/js/bundle.js 파일이 생성되며, 바벨도 함께 실행된 것을 확인할 수 있다.

$ yarn webpack