webpack의 도입을 최소 단위로 시도

webpack is 무엇?

webpack 은 JavaScript를 정리해 주는 모듈 번들러입니다. 왜 정리해야 하는가? 이는 한 번에 웹 서버와 통신할 수 있는 파일 수가 제한되어 있기 때문에 파일 크기가 작은 파일을 세밀하게 전송하는 것보다 큰 파일을 한 번에 전송하는 것이 효율이 좋기 때문입니다.

그렇다면 다른 도구도 실현 가능하지만,
webpack의 경우는 표준 사양의 ES Modules를 사용할 수 있고 node_modules의 모듈을 결합할 수 있다는 것. 그렇다면 다른 도구 (Gulp, Grunt ...)는 node_module을 결합해주지 않는다는 것인가 ··?

그뿐만 아니라, CSS나 이미지의 번들도 할 수 있다고 하는 것입니다만, CSS는 이미지 할 수 있다고 해서, 이미지의 번들이란 무엇인가? 다음에 살펴보겠습니다.

그럼 조속히 실천해 봅시다.

손을 움직이다

정말 제로 상태로 시작합니다.
소요 시간 : 5mins 정도

1. 우선, 디렉토리를 만들어 초기화.

mkdir sample
cd sample
npm init -y

package.json이 생성됩니다.

2.webpack 설치

npm install -D webpack 

스크립트에 "build": "webpack"를 추가합시다.

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}

devDependencies 곳에 webpack이 추가되었습니다.

3. 번들할 JS를 준비한다.

디렉토리 안에 텍토에 src등으로 디렉토리를 잘라, main.js와 sub.js와 같은 2개의 파일을 준비합시다. 내용은 아래와 같은 느낌.

main.js

// sub.js ファイルを読み込む。
import {hello} from './sub';
// sub.jsに定義されたhello関数を実行。
hello();

sub.js

// export文を使ってhello関数を定義。
export function hello() {
  alert('helloメソッドが実行された。');
}

4. webpack.config.js 만들기

webpack.config.js

module.exports = {
  // メインとなるJavaScriptファイル
  entry: './src/main.js',

  // ファイルの出力先設定
  output: {
    // ディレクトリ名
    path: `${__dirname}/`,
    // ファイル名
    filename: 'bundle.js'
  }
};

5. webpack에 의한 build

npm run build

이제 main.js와 sub.js가 통합되어 하나의 bundle.js라는 파일을 만들었습니다.
HTML로 로드하여 브라우저에서 알림이 표시되는지 확인해 보세요.

index.html

<script src="bundle.js"></script>

표시되었습니다.