webpack 기본 사용법

코드 사이트

https://joshua1988.github.io/webpack-guide/getting-started.html#%EC%9B%B9%ED%8C%A9-%EB%A7%9B%EB%B3%B4%EA%B8%B0-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC

웹팩 맛보기 | 웹팩 핸드북

이 사이트의 코드를 예제로 사용했다.

동작의 원리

package.json 및 dist

webpack을 설치하고나서 package.json에

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

build 부분을 추가했다. 이러고 npm run build를 하면

dist폴더가 생기고 main.js가 있다. 

main.js에 모든 파일들을 모아준 것인데 index.js 같은 파일들을 묶어주고 라이브러리들을 따로 묶어줬다.

webpack.config.js

webpack.config.js는 웹팩 설정 파일이다.

var path = require("path");

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  // webpack을 entry 있는 파일을 대상으 돌려서 output(결과물)을 내는 것
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
};

이 코드를 사용하였다.

 

-mode

mode에서는 배포 모드인지 개발 모드인지 설정할 수 있다. 

none: 디폴트 값이며 개발 모드에서도 사용 가능

development: 개발 모드에서 사용 가능

production: 배포 모드에서 사용 가능하며 배포하면 반드시 mode를 production으로 바꿔야한다.

 

-entry

entry에서는 번들링이 시작되는 파일을 정할 수 있다. 즉 entry에 최상위 js 파일이 어디있는지 명시할 수 있다.

기본값은 "./src/index.js"이다.

 

-output

output는 번들링된 결과물의 설정을 할 수 있다.

filename: 번들링된 파일의 이름을 설정

path: 번들링된 파일을 어디에 저장할 것인지 경로 설정

webpack 사용하는 이유

request를 줄임

-webpack 사용 전

webpack 사용 전

webpack을 사용하기 전에는 requests를 5개를 가져온다.

 

-webpack 사용 후

webpack 사용 후

위에서 말했듯이 라이브러리도 묶어주기 때문에 이미 사용한 라이브러리를 2번 불러올 필요가 없어서 requests가 줄어든다.