매일 하루 벨로그의 좋은 글을 받아적은 TIL
Webpack이란?
Webpack은 오픈 소스 자바스크립트 모듈 번들러이다.HTML파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다.
Webpack으로 코드를 build해보면 정해놓은 폴더 안의.js 파일들이 생성된다. 이 안은 여러 곳에 퍼져있는 내 모든 코드들이 합쳐져 일정 개수의 파일이 만들어져있고, 특정 파일에서 특정단어를 검색할 수 있다.
Webpack 왜 사용할까?
코드가 길어질수록 관리하기 어렵다. 많은 양의 파일(코드)를 브라우저에 로드하는데에는 시간이 오래 걸리고, 특정 상황에 네트워크 비용이 발생할 수 있다. Webpack을 사용하기 전 과거의 CommonJS나 AMD는 파일별로 모듈을 관리할 수 있었지만, 여전히 쉽지 않다.
요즘은 SPA(Single Page Application)이 추세이고, 브라우저를 최적화하는 것은 웹 프론트엔드에게 꼭 필요한 요구조건이다.
Webpack의 주요 개념은 네 가지가 있따.
entry
webpack은 모든 파일을 모듈로 관리한다. Webpack에서 모듈들은 많아질수록 서로에게의 의존성이 높아진다. 그 의존성의 시작점을 entry라고 한다.
const config: webpack.Configuration = merge(baseConfig, {
mode: 'production',
entry: './src/index.tsx',
...output
Webpack을 이용해 build를 하고, 번들된 파일의 위치를 지정하는 것이 output이다.
...
output: {
path: path.resolve(__dirname, '..', 'dist'),
publicPath: '../dist/',
filename: 'bundle.js'
},loader
Webpack은 사실 javaScript밖에 모른다. CSS SCSS, babel, file 등 loader로 등록을 해주어야 한다. Webpack이 bundle할 때 인식할 수 있다.
/**
* Transfile TS files or TSX files to JS files.
* And run babel at JS files to transfile ES6+ code to ES5.
*/
{
test: /\.tsx?$/,
use: {
loader: 'awesome-typescript-loader',
options: {
silent: true,
useBabel: true,
useCache : true,
babelCore: '@babel/core',
babelOptions: {
babelrc: false,
presets: babelPresets
}
}
}
},Plugin
loader는 파일을 해석하고 변환하는 과정에 관여해 모듈을 처리한다면, plugin은 해당 결과물의 형태를 바꾸는 역할을 하므로 번들링된 파일을 처리한다는 점이 다르다. 결과물에서 스타일 코드만 뽑아서 별도 CSS파일로 만들어 역할에 따라서 파일을 분리하는 것이 가능하다.
plugins: [
/**
* Add production environment.
* Ref: https://webpack.js.org/plugins/define-plugin/
*/
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
'process.env.FLUENTFFMPEG_COV': false
}),Babel이란?
Babel은 JavaScript Compiler이다. 단순히 컴파일을 위한 것이 아닌, 브라우저를 위한 Transpiler이다.
브라우저들이 최신 JavaScript 코드를 읽지 못하는 것을 위해 최신 버전의 javaScript를 브라우저가 읽을 수 있도록 옛날 버전의 javaScript 코드로 변환해주는 역할을 한다.
Parsing → Transforming → Printing
