webpack이란???
entry 즉, 머리부터 시작해서 loader/rules를 통해 연결되어 있는 것들을 묶어서 최종적으로 ouput을 제공해줍니다.
번들링이란?
의존성이 있는 모듈 코드를 하나 또는 여러개의 파일로 만들어줍니다.
과거 자바스크립트는 페이지별로 파일분리하고 HTML에서 script태그로 로드하다보니 의존성있는 모듈 순서 등의 문제들이 많았습니다.
이러한 문제를 해결해주기 위해 모듈단위의 개발방식인 번들링이 등장하게 되었습니다.
번들러란?
번들링해주는 도구입니다.
Requires, brwoserify, rollup, parcel, webpack등이 있고 webpack이 가장 많이 사용되고 있습니다.
webpack
CommonJS, AMD, ES6 Module(v2부터) 포맷 전부 지원가능하며,
자바스크립트뿐만 아니라 CSS, Image 파일 등 리소스의 의존성도 관리해줍니다.
Code splitting, dynamic import , tree shaking deserver 등 기능 설정도 가능합니다.
환경설정하는 방법에 대해서 알아보도록 하겠습니다.
프로젝트 폴더 루트에 webpack.config.js파일을 생성합니다.
entry: 번들링할 파일들의 시작점입니다. spa구조에서는 주고 src/index.js 로 명시합니다.
output: 번들링 된 파일의 위치와 이름 설정이 가능합니다. 명시적으로 파일 이름 설정도 가능하며 번들링 될 때마다 hash값을 통해 동적으로 이름 생성이 가능합니다.
1-1) webpack.config.js 환경설정
1-2) 빌드된 파일
2-2) webpack.config.js 환경설정
2-2) 빌드된 파일
Loader
기본적으로 자바스크립트 파일만 인식을 하여 다른 타입의 파일의 파일도 처리 가능하게 모듈로 변환해주는 도구입니다.
로더는 실제 사용할때 rules를 이용하여 정의하고 있습니다. v.2.0부터 loader -> rules로 사용법이 바뀌었다고 합니다.
Plugin
번들링이 끝난 뒤 최종적으로 나온 번들을 조작하고 싶은 경우 사용합니다.
최적화나 에셋들을 관리할 수 있습니다.
즉, 최종 후첨하는 조미료라고 할 수 있습니다. (신라면 블랙의 후첨소스!!!)
빌드된 결과물을 사용자에게 더 빠르고 효과적으로 제공해주기 위해서 사용하는 도구라고 생각하면 될 것 같습니다.
HTMLWebpackPlugin
HTML 파일을 생성하고 script태그에 번들링된 파일을 삽입해줍니다.
CleanWebpackPlugin
번들 시작되기전 특정 폴더를 지워주는 플러그인으로 주로 빌드 폴더 정리하는데 사용됩니다.
HotModuleReplacementPlugin
webpack에서는 변경된 모듈을 실시간으로 번들 파일에 적용하고 업데이트해 주는 기능을 제공합니다. HMR(Hot Module Replacement)을 사용하면 파일을 수정할 때마다 페이지 리로드 없이 변경된 부분의 모듈만 업데이트되는 것을 확인할 수 있습니다.
TerserPlugin
ouput.js 파일의 사이즈의 크기를 줄여주는 역할을 합니다.
기존에 uglifyJSWebpackPlugin을 보통 사용했을 텐데 해당 플러그인은 더 이상 유지보수를 진행하지 않다고 하여 TerserPlugin을 사용하는게 좋다고 합니다.
또한 minfiy속도에서도 몇배가 더 빠르다고 합니다.
SourceMapDevToolPlugin
난독화된 파일의 소스맵을 그려서 디버깅을 도와주는 역할을 합니다.
ExtraTextWebpackPlugin
css파일을 독립적으로 관리하고, js파일과 동시에 로드할 수 있어 빠른 속도로 렌더링이 가능합니다.
css, js파일을 구분하여 묶어내고 js와 css파일을 클라이언트단에서 동시에 로딩이 가능하여 불필요한 로딩시간이 발생하지 않게 해줍니다.
Mode
개발환경, 운영환경을 구분하여 작업을 분리할 수 있습니다.
웹팩3에서는 커맨드 라인에서 —mode를 넘겨서 분기태워서 적용가능하였으며,
웹팩4에서도 가능은 하지만, mode옵션 추가로 인해 더 나은 방법이 있습니다.
각 환경별로 파일 분리한뒤 mode 옵션 추가합니다.
1) 각 환경별 파일 분리
//webpack.config.dev.js
module.exports = {
mode: 'development', // production 설정 파일에서는 'production'
}2) 한 파일내에서 처리하는 경우
// env: --env 커맨드 라인 옵션 정보 넘어옴
// options: mode 정보가 넘어옴
module.exports = (env, options) => {
const config = {
entry: {
app: ['./src/index.js']
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
if(options.mode === 'development') {
//... Development 설정
} else {
//... Production 설정
}
return config;
}SplitChunksPlugins
webpack4부터는 내재된 기능이며 번들링 할 때 공통으로 사용되는 모듈이나 라이브러리들을 별도의 청크로 분리합니다.
이전 회사에서도 한 파일에 번들링된 양이 너무 많이 초기 로딩이 매우 느려지는 이슈가 있었습니다. 해당 플러그인을 사용해서 공통으로 사용되는 모듈이나 라이브러리를 별도로 분리하여 모든 파일이 하나로 번들링되지 않게끔 하였습니다.
all 을 사용하는데 말 그대로 test 조건에 포함되는 모든 것을 분리하겠다는 뜻이며 initial 은 초기 로딩에 필요한 경우, async 은 import() 를 이용해 다이나믹하게 사용되는 경우에 분리합니다.
module.exports = {
...
optimization: {
splitChunks: {
chunks: 'all',
name: 'vendors'
}
}
};webpack-bundle-analyzer 플러그인은 번들링된 파일을 시각화해주는 도구입니다.
splitChunksPlugins을 사용하여 비교해보았습니다.
sourceMap
트랜스파일, 압축/난독화된 코드를 실제 코드와 대응시켜주는 기술입니다.
webpack 환경 설정 파일에서 한줄만 추가해주면 됩니다. (dev환경일때에만 디버깅 용도로 사용)
난독화
소스맵 적용
