본문 바로가기
Tools/VSCode

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

by 썸머워즈 2022. 3. 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가 있다고 친다면.

 

 

이제 3. 터미널을 통해 명령어를 입력하여 웹팩을 실행할 것이다. (둘 중 하나)

npx webpack
npx webpack --config webpack.config.js

 

 

그럼 명령어가 실행되면서 ./src/index.js 와 ./src/js/common.js 를 대상으로 파일을 하나 만들어준다.

(기준이 되는 파일이 index.js이기 때문에 거기서 사용된 common.js를 같이 가져온 것이다.)

 

결과 이미지를 보면 아래와 같이 bundleBuild라는 폴더가 자동 생성되며, build.js 파일 역시 생성되었다.

 


여기까지 웹팩 기본 설정에 대해 알아봤는데,

나중에 loader 설정, webpack.config.js 기타 설정 등에 대해 좀 더 다뤄볼까 한다.

반응형


댓글

TOP