webpack is a static module bundler for modern JavaScript applications.
참조 : https://webpack.js.org/concepts/
작성일 기준 webpack 버전은 4.41.6
시작 가이드 : https://webpack.js.org/guides/getting-started/
webpack 이란?
- webpack 은 최신 javascript 응용 프로그램을 위한 정적 모듈 번들러(module bundler)
- module 은 프로그램을 구성하는 일부요소 또는 기능별로 나뉘어지는 프로그램
- bundler 는 지정한 단위로 파일들을 하나로 만들어주는 역할을 수행
- 위 그림을 보면 좀 더 쉽게 이해가 가능하다. 모듈들을 정적 자원으로 묶어버리는걸 볼 수 있다.
webpack 왜써?
<html>
<head></head>
<body>
<div id='app'>
</div>
</body>
<script src="/src/foo.js"></script>
<script src="/src/bar.js"></script>
<script src="/src/baz.js"></script>
</html>- 응용 프로그램을 시작하기 위해 별도의 http 요청(3회)이 필요
- 3회라고 작성은 하였으나, 만약 foo.js 안에서 다른 자바스크립트 모듈을 불러온다면? 요청 횟수가 더 증가할거다.
- css 같은 경우도 내부에 @import 구문이 있다면 http 요청 횟수가 더 증가할거다.
<html>
<head></head>
<body>
<div id='app'>
</div>
</body>
<script src="/dist/bundle.js"></script>
</html>- 웹팩 모듈 번들러를 사용하면, 종속성(dependency)이 있는 여러개의 모듈들을 하나의 파일로 묶어줍니다.
- 위와 같이 되면 http 요청 횟수가 기존보다 줄어들게 되어 오버헤드가 상당히 감소하는 효과를 얻습니다.
- 지정한 메인 파일(entry)에서 시작해 commonJS 모듈과 import(ES6)문을 참고해 프로젝트의 모든 의존성을 조사하고 로더를 이용해 처리한 후 번들로 묶은 파일을 생성
const moment = require('moment'); // commonJS
import moment from 'moment'; // es6 import
// commonJS
module.exports = foo;
const foo = require('./foo');
// es6 import
export default foo;
import foo from './foo';
webpack 핵심 개념
- Entry
- Output
- Loaders
- Plugins
- Mode
- Browser Compatibility
위의 핵심개념들을 이해하기 위해서는 webpack.config.js 을 생성하여 한번씩 작성해보기를 권한다.(기본 값으로 루트 디렉토리의 webpack.config.js 파일을 읽어온다.)
참조 : https://webpack.js.org/configuration/#options
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
npm script 로 설정파일을 다르게 가지고 오고 싶다면
webpack --config ./config/webpack.config.prod
- entry : 파일을 읽어들이기 위한 시작점, 의존성 그래프의 시작점
module.exports = {
entry: './src/index.js'
};
module.exports = {
entry: {
main: './src/index.js',
common : './src/common.js'
}
};
// main.js / common.js 가 생성
module.exports = {
entry: {
app: ['./src/index.js', './src/common.js']
}
};
// app.js 가 생성
- output : 웹팩의 결과물을 위치 및 결과물 파일명을 지정
{
output: {
path: '/dist',
filename: '[name].js',
publicPath: '/',
},
}
path : 경로 지정
filename : 결과물 파일명 지정
publicPath : 결과물이 위치할 서버상의 경로
filename 에는 옵션들이 존재합니다.
[name] : entry 에서 지정한 key값이 여기로 들어갑니다(모듈이름)
[id] : 웹팩 내부적으로 사용하는 모듈 ID
[chunkhash] : 모듈 내용을 기준으로 생성된 해시 값(파일이 달라질때 마다 해시값 변경)
[hash] : 매 빌드시 마다 고유 해시 값(생성할때 마다 해시값 변경)
- loader : 웹팩은 오직 자바스크립트, JSON만 이해가 가능하기 때문에 css, 이미지, 폰트 등을 웹팩이 읽을 수 있는 자바스크립트로 변경되어야 하는데, loader가 변경해 주는 역할을 수행
즉, 로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성(css-loader 를 생각하자)
module.exports = {
module: {
rules: []
}
}
- plugin : 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성
번들링한 결과물에 추가적인 기능을 사용한다고 생각하자
예) 압축, 핫리로딩, 난독화 등
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins : [
new HtmlWebpackPlugin(), // 웹팩의 결과물로 HTML 파일을 생성해주는 플러그인
new webpack.ProgressPlugin(),
new webpack.optimize.UglifyJsPlugin(),
// ...
]
}
// 플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가
- mode : 웹팩4에서 추가 및 필수 옵션
mode 는 production, development, none 3가지 옵션이 존재
mode 의 production 은 각 설정마다 내장된 최적화 옵션을 자동으로 설정
The default value is production
module.exports = {
mode : 'development',
entry : './src/index.js',
output: {
path: '/dist',
filename: 'bundle.js'
}
};
위와 같이 구성파일에서 속성으로 설정이 가능하며
webpack --mode=production
이런식으로 명령어로도 지정이 가능하다
