webpack 시작하기
webpack 기초
모듈 번들링에 대한 Preethi Kasireddy의 글 을 읽어보면 모듈번들러의 필요성에 대해 알수있다. 또한 React를 공부하려고 찾아보면 일반적으로 기반을 만들 때 모듈번들러를 사용한다. 유명한 모듈번들러는 Browerify와 Webpack이 있는데 지금은 Webpack쪽으로 기울고 있는 추세 인것 같다. 프로젝트의 크기가 커질 수록 모듈에 대한 중요성은 커지기 때문에 익혀놓으면 도움이 될 것 같다.
아쉽게도 공식 도큐먼트의 설명이 친절하지 않다. 다른 분들이 webpack에 대해 정리 및 비교해 놓은 글들이 도움이 많이 된다.
Webpack의 장점
- 다수의 js파일을 하나의 js파일로 합치고 minify해준다.
한 페이지에서 다수의 js파일이 script태그에 포함된다는 것은 다수의 request를 보내야 한다는 것을 의미한다. 하나의 request로 모든 스크립트를 불러오면 그만큼 페이지의 접근시간에 이득이다. 또한 코드의 쓸모없는 부분을 제거해서 minify해준다. - 컴파일러를 사용 할 수 있다.
babel로 ES6코드를 작성하거나 SASS나 LESS, CoffeeScript등을 위한 컴파일러의 사용을 자동화 할 수 있다. - HMR를 지원한다.
HMR(Hot module Replacement)는 코드를 watch하고 있다가 바뀌면 자동으로 코드를 리프레시해준다. - 빌드가 빠르다.
사용해본 사람들에 의하면 Browerify에 비해서 빌드 속도가 월등히 빠르다고한다. - npm 생태계를 그대로 이용할 수 있다.
npm을 그대로 이용할 수 있는 장점이 있다.
설치하기
npm을 통해 설치한다.
npm install -g webpack
실행명령
그냥 webpack명령어만 입력하면 알아서 설정파일을 찾아서 번들링해준다. 물론 직접 파일을 지정해 줄 수도 있다.
–watch 옵션을 주면 파일이 변경 되는 경우 자동으로 빌드해준다.
webpack
webpack.config.js
webpack의 설정파일이다. 이 파일에 필요한 기능들을 설정해준다.
module.exports = {
entry: './module/entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
}
이 경우엔 module 폴더 속에 필요한 js파일들이 있다.
- entry : 번들링 할 파일의 경로를 설정
- output : 결과물의 이름과 경로를 설정
Loader
webpack의 강력한점은 로더를 설정할 수 있다는 것이다.
예를 들자면 css는 물론이고 pre-compiler인 sass를 사용 할 수 있다.
npm install --save-dev style-loader css-loader sass-loader
css-loader는 css파일을 그냥 로드해 주는 역할이고 style-loader는 파일에 style태그를 통해서 css파일을 포함시켜준다.
(node 환경에서 사용하기 위해서는 node-sass 또한 설치해야한다.)
module.exports = {
entry: './module/entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module:{
loaders:[
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
}
]
}
};
- test : 정규식을 통해 로더가 필요한 파일의 패턴을 설정
- loaders : 어떤 로더를 사용할 건지
jshint의 경우에는 인터프리팅 전에 로드되어야 하기 때문에
preLoaders 프로퍼티를 이용한다는 것 말고는 같은 방법으로 사용할 수 있다.
npm install --save-dev jshint-loader
module.exports = {
entry: './module/entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module:{
preLoaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "jshint-loader"
}
],
loaders:[
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
}
]
}
};
Global setting
가끔 모듈이 번들링 되면서 global 변수의 scope문제가 발생하는 경우가 있는데, 미리 설정해야할 global 변수들은 webpack이 기본으로 제공하는 ProvidePlugin을 통해서 설정할 수 있다.
module.exports = {
entry: './module/entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module:{
preLoaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "jshint-loader"
}
],
loaders:[
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
}
]
},
plugins: [
new webpack.ProvidePlugin({
"window._": "lodash"
_: 'lodash',
$: "jquery",
"window.$": "jquery",
})
]
};
devtool
모듈이 번들링되면 가독성이 떨어지고 디버깅이 힘들다. 특히 React와 같은 라이브러리를 babel로 트랜스파일한 경우라면 더욱 그렇다. 하지만 devtool을 설정해 주면 보다 디버깅을 쉽게 할 수 있다. 보통 eval, source-map, inline-source-map가 주로 사용된다.
devtool 옵션
source map에 대해서
{
devtool: "eval"
}
error
build중 에러가 발생할 경우 간단하게 에러메시지를 띄워주는데, 더 자세한 에러를 볼 수 있다.
webpack --display-error-details
webpack dev server
webpack을 사용할 때, 코드를 바꿀 때 마다 터미널에서 webpack을 입력해서 번들링을 하고 브라우저를 리프레시 해야한다. 하지만 webpack에서 제공하는 dev server를 이용해서 이런 수고를 덜 수 있다.
npm install -g webpack-dev-server
webpack-dev-server 명령어를 통해서 localhost:8080을 띄울 수 있다. lnline 옵션과 hot 옵션을 통해서 프로젝트의 파일을 변경하면 자동으로 빌드를 해주는 HMR을 사용할 수 있다.
webpack-dev-server --inline --hot
매번 명령어를 치기가 귀찮다면 pakage.json의 scripts에 위의 명령어를 추가하면 된다.
마치며
소개한 기능은 빙산의 일각일 만큼 webpack은 매우 유연하다. npm script와 함께 task runner로 많이 사용되지만 gulp, grunt와의 연동을 위한 플러그인도 있다. 좀더 사용하는데 익숙해 지면 훨씬 편하게 프로젝트를 관리 할 수 있을 것 같다.
참고사이트
https://github.com/AriaFallah/WebpackTutorial/tree/master/part1
http://d2.naver.com/helloworld/0239818
http://hyunseob.github.io/2016/04/03/webpack-practical-guide/
http://survivejs.com/webpack/developing-with-webpack/automatic-browser-refresh/