Webpack - config 파일 만들어보기

 

♣ webpack.config.js

- 정말 완전 기초적인 웹팩 기본설정 파일을 만들어본다

const path = require('path');

module.exports = {
  mode: 'development',
  // 시작점(단일)
  entry: path.resolve(__dirname, 'src/index.js'),
  // 웹팩 작업을 통해 생성된 결과물 저장위치
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
};

 

➜ mode : 번들링 할 때 최적화 수준을 설정하는 옵션

development(개발), production(배포), none(설정 없이 webpack기능만적용) 이렇게 3가지를 확인할 수 있는데 특징은 아래 표와 같다.

Mode	특징	최적화 여부
development	빠른 빌드, 디버깅 용이	최적화 X
production	코드 최적화, 성능 개선	최적화 O
none	Webpack 기본 설정만 사용	최적화 X

 

➜ entry :  webpack이 시작하는 파일 (진입점)

일반적으로 src/index.js를 많이 사용하고 단일이 아닌 다중으로도 사용 가능하다는 점!

아래 코드와 같이 entry를 2개로 설정하면 main.js와 test.js의 2개의 번들 파일이 생성된다.

    entry: {
      main:path.resolve(__dirname, 'src/index.js'),
      test:path.resolve(__dirname, 'src/test.js')
    },

 

 

➜ output : 번들링 된 결과물 저장 위치

웹팩을 통해 번들링을 했다면 그 파일을 어디에 보관할 건지 지정해 주는 값이라고 생각하면 된다! 일반적으로는 build 할 때 생기는 dist폴더에 생성된다

결과 저장위치와 저장될 파일의 이름을 설정하면 끝! 다만 다중 entry가 있는 경우엔? 당황하지 않고 아래 코드처럼 [name]을 사용해 준다.

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js', // main.js, test.js
  },

---

 

🎈위에서 사용한 path 관련 알아보기

- nodejs에 내장되어 있는 모듈로 따로 라이브러리 설치 없이 바로 불러와서 사용할 수 있다. 

// commonJS Modules 
const path = require("path");

//ES Modules
import path from "path";

// path가 해주는 역활이 뭐지? 현재 프로젝트의 경로를 알 수 있다!
console.log(__dirname); 
// /Users/local/Documents/GitHub/study/webpack
// path resolve를 사용한다면?
path.resolve(__dirname, 'src/index.js') 
// /Users/local/Documents/GitHub/study/webpack/src/index.js

 

아래는 CJS, ESM의 내용을 간단하게 표로 정리한 것이다

찾아보니까 ESM이 자바스크립트 공식 모듈 시스템으로 브라우저도 사용가능하고 최신 표준이라 사용이 많이 되는듯하다!

다만 Node.js 환경에서는 CJS도 사용이 가능하기 때문에 사용을 하니까 참고로 알아두기

	CommonJS (CJS)	ES Modules (ESM)
사용 방식	require() / module.exports	import / export
비동기 지원 여부	동기적 (즉시 실행)	비동기 지원(Dynamic Import)
브라우저 실행 가능 여부	기본적으로 불가능하여 번들러 필요	브라우저에서도 가능 (<script type="module">)
Node.js 지원 여부	기본 지원	package.json에  "type": "module" 설정 필요
파일 확장자	.js 또는 .mjs	.js

 

 

 

진짜 간단하게 초기 설정파일을 해봤는데 다른 옵션값이 더더 많을 테지만 기초 뼈대는 이해완료!! 사용 안 한다고 잊지 말자!