[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(1)

VSCode에서 웹팩(Webpack)을 설정해보자.

당연하게도 node.js를 통해 뭔가를 설치하고 설정하려면 package.json이 있어야한다.

package.json이 있다면 이제 1. 명령어를 통해 웹팩 라이브러리를 설치한다. (둘 중 하나만)

npm install --save-dev webpack webpack-cli
npm install -D webpack webpack-cli

이러면 설치가 진행되며, 설치가 완료되고 나서 package.json을 살펴보면 다음과 같이 나와있다.

{
  "name": "prj01_vanillajs_es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  }
}

설치가 완료된것을 확인했다면, webpack.config.js 설정 파일을 만들어야한다.

이 파일은 Webpack이 실행될 때 참조하는 설정 파일이므로 2. 프로젝트 루트에 webpack.config.js 파일을 생성하고 내용을 작성하면 된다.

const path = require('path');

module.exports = {
    mode: "development", // "production" || "development" || "none"
    // entry 속성은 최상위 자바스크립트를 의미하며
    // 이 속성에 명시된 파일을 기준으로 의존성 트리를 만들어 하나의 번틀 파일을 만든다.
    entry : "./src/index.js",
    // output 속성은 컴파일 + 번들링 된 js 파일이 저장될 경로와 이름을 지정한다.
    output : { 
        path : path.resolve(__dirname, "bundleBuild"),
        filename : 'build.js'
    },
    // module 속성은 로더를 설정해주는 역할을 한다.
    // webpack은 js뿐만 아니라 Loader를 이용하여 CSS나 이미지, 웹폰트, jSX, VUE 등
    // 다양한 종류의 파일을 함께 번들링 할 수 있는데 그 설정을 여기서 하는 것이다.
    module: {
        rules: [],
      },
}

webpack.config.js에 대한 속성과 상세 설명은 아래 링크를 통해 자세히 살펴보자.

https://webpack.js.org/configuration/

Configuration | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

기본설정을 마쳤으면 이제 웹팩을 실제로 사용해 볼 것이다.

아래와 같이 entry로 설정된 index.js가 있다고 친다면.