webpack 기초 입문 ( entry, output )

webpack ?

webpack은 Node.js 환경에서 실행되고 npm으로 설치할 수 있다.

웹팩은 자바스크립트, HTML, CSS, 이미지와 같은 여러개의 assets (js, css,png,jpg 등)을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러로 의존성이 있는 모듈을 취하여 해당모듈을 대표하는 정적 자산들을 생성한다.

 

정적 자산들이란 말 그대로 움직임이 없이 고정된 자산들을 말하며 webpack은 예를들어 여러가지의 모듈을 main.js 에 통합 해준다.

webpack 실습 전 디렉터리 구조

// bye.js
function webpackTest2() {
  console.log('bye webpack!');
}
webpackTest2();

// hi.js
function webpackTest1() {
  console.log('hi webpack!');
}
webpackTest1();

//main.js
import './hi';
import './bye';

webpack 실습

실습 폴더 

npm을 사용하여 webpack 환경을 구축하도록 하겠다.

 

먼저 실습하고자하는 폴더를 만들고 이동

해동 폴더에 package.json을 생성하기 위해 npm init -y 입력한다.

입력하고 나면 폴더에 아래와 같은 package.json 파일이 생성되게 된다.

// package.json
{
  "name": "webpackstudy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

여기까지 왔다면 webpack을 설치한다.

npm install webpack webpack-cli --save-dev

 

설치를 했다면 폴더에 webpack.config.js 파일을 생성한다.

webpack.config.js 파일에 기본적으로 들어가야할 3가지가 있는데 mode, entry, output이 있다

• mode : webpack에 내장된 최적화를 사용하도록 지시하는 것으로 none, development, production(기본값)이 존재

• entry : 쉽게 설명하면 webpack bundler에 누가 참여할 것인가?

• output : 그리고 결과물은 어디로?

아래와 같이 webpack.config.js에 입력한다.

// webpack.config.js
const path = require('path');

const MAIN_FILE = path.resolve(__dirname, 'src', 'assets', 'js', 'main.js');

module.exports = {
  mode: 'development',
  entry: [MAIN_FILE],
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js',
  },
};

입력 했다면 이제 webpack 을 실행시키기 위해 package.json scripts부분에 추가할 것이 있다.

{
  "name": "webpackstudy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:assets": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }
}

scripts 부분에 webpack을 실행할 명령어 이름을 정하고 webpack을 적어준다. "build:assets" 부분은 원하는 이름으로 변경해도 된다.

 

npm run build:assets

실행시켰다면 현재 프로젝트 폴더내에 아래와 같이 번들링한 폴더(dist)와 파일(main.js)이 생겼을 것이다.

여기서 webpack을 사용하는 이유가 나온다.

index.html

open index.html 하여 console창 확인

 

webpack 모듈 번들러를 사용하기 전과 후 차이를 아시겠나요??

webpack 모듈 번들러를 사용하기 전에는 js 모듈이 두개가 있다면 script를 2줄을 작성하여 사용했어야 하지만

모듈 번들러를 이용해 해당모듈들을 대표하는 main.js로 통합하여 관리하면 1줄이면 가능하다.

 

만약 모듈 번들러 없이 js 모듈들이 40개가 된다고 가정하면 index.html에 script가 40줄이 생기는건데 끔직하지 않을까요?

 

이상 복습겸 간단하게 정리해봤습니다.

잘못된거나 지적사항이 있다면 알려주시면 감사하겠습니다!