BLOG 

webpack 을 사용한 개발 및 배포를 위한 기본 boilerplate 작업 후기입니다.

참고 URL

• Webpack 실전가이드
• 초보자용 Webpack 튜토리얼 파트1 - Webpack 입문
• https://github.com/wonism/TIL/tree/master/front-end/webpack

주요작업 내용입니다.

1. npm init

npm init 또는 npm init -y 로 package.json 의 기본사항을 작성합니다.

2. npm install XXX --save-dev

관련된 의존 모듈을 local 에 설치하고, package.json 에 추가합니다.

// Webpack 기본
npm install webpack --save-dev

// HTML plugins
npm install html-webpack-plugin --save-dev

// Loader (CSS, SASS, LESS, JADE)
npm install style-loader css-loader node-sass sass-loader less-loader jade jade-loader --save-dev

// ES2015(ES6) with babel
npm install babel-loader babel-core babel-preset-es2015 --save-dev

// Lint 관련
npm install eslint eslint-loader --save-dev

// Webpack 개발서버
npm install webpack-dev-server --save-dev

위의 명령을 실행해서 생성한 package.json 파일은 아래와 같습니다.

---

3. webpack.config.js 작성

일단 작성된 기본 webpack.config.js 는 아래와 같습니다.

• entry 와 output 항목은 multi-file 기준으로 작성했습니다. (현재는 1개 파일이지만)
• module.loaders 항목에는 기본으로 css, sass, babel loader 를 지정했습니다
• module.preloaders 항목에는 기본으로 eslint 를 지정했습니다

4. .eslintrc 작성

preloader 에 사용하는 eslint 의 환경설정을 위해, .eslintrc 파일도 작성했습니다.

• linebreak-style 은 window 에서 crlf 기준으로 지정했습니다.
• quotes 는 single 기준으로 error 대신 warn 으로 지정했습니다.

---

5. webpack 실행

여기까지 작업한 후 (물론, src 폴더에 html, js, css 등 작업물이 있다고 가정)
webpack 을 실행하면, output 이 결과물이 생성됩니다

• 소스를 반복적으로 수정한후, 결과를 확인할려면 webpack -w (or --watch) 로 실행하면 됩니다.

---

6. webpack 의 개발 / 배포 모드 구분

webpack 의 개발및 배포용 환경은 보통 구분되어져야 하는데
이에 때라 기본환경파일인 webpack.config.js 는 보통 webpack.config.dev.js (개발용) 및 webpack.config.prod.js (배포용) 으로 구분합니다.

개발모드에서는 source-map 등 debugging 용 설정등이 추가되고
배포모드에서는 소스 크기등 최적화용 설정등이 추가됩니다.

• webpack.config.dev.js 샘플
  

• webpack.config.prod.js 샘플
  

개발시에는 주로 webpack-dev-server 를 사용해서 HMR(Hot Module Replacement) 기능 (livereload) 을 활용하게 되는데
아래의 명령을 사용하면 됩니다.

> webpack-dev-server --inline --hot --config webpack.config.dev.js

배포시에는

> webpack --config webpack.config.prod.js

7. package.json 의 scripts 에 개발/배포 script 지정

위의 개발/배포 명령을 package.json 에 추가한후,

• 개발시에는 : npm run dev
• 배포시에는 : npm run build

---

이 글에서 작업된 결과물은 아래 github 에 올려두었습니다.

• https://github.com/fronteer-kr/fx-webpack1