프론트엔드 작업을 하다보면 여러가지 많은 파일들이 작성된다. 이러한 파일을 한번에 모두 내려받거나 각각 받는다면 렌더링 속도가 굉장히 많이 늦어질 것이다. 따라서 목적에 맞게 파일을 병합 / 나눌 수 있게 해주는 Webpack과 최신 문법을 사용하되 옛날 브라우저와의 호환성까지 고려해주는 Babel을 TypeScript 환경에서 설정해보자.
Babel 관련 설치
이번 포스트에서는 react와 typescript를 사용한다.
npm install -D @babel/core @babel/preset-env @babel/react @babel/typescript
yarn add -D @babel/core @babel/preset-env @babel/react @babel/typescript몇몇 라이브러리에 대한 설명은 다음과 같다.
- @babel/core : 기본적인 바벨 라이브러리
- @babel/preset-env : 지정된 대상 환경에 대해서 가져와 매핑과 대조를 하고 플러그인 목록을 컴파일해 바벨에 전달
Babel 설정 파일 작성
바벨 파일을 작성하기 앞서 공부하던 중 공식문서에서 재밌는 사실을 알게 되었다.
babel 파일의 네이밍에 따라 쓰이는 범위가 달라진다는 점이다.
프로젝트 전체 구성에서는 babel.config.js를 사용한다.
서브셋 디렉토리에 영향을 끼치고 싶다면 .babelrc를 사용할 수 있다.
또한 js와 json의 차이는 js를 사용할 경우 바벨 구성 api가 노출이 돼 캐싱 관련 복잡성이 증가한다.
따라서 우리는 babel.config.json을 사용하려고 한다.
{
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: ["last 2 versions", ">= 5% in KR"]
}
}
],
"@babel/react",
"@babel/typescript"
]
}여기서 타겟 브라우저를 최신 2개의 버전의 브라우저와 한국에서 사용되는 5% 이상 브라우저만 허용으로 설정했다.
Webpack 관련 설치
웹팩 관련해서는 여러가지 파일을 설치할 예정이다.
npm install -D webpack webpack-cli webpack-dev-server
yarn add -D webpack webpack-cli webpack-dev-server- webpack-dev-server : 라이브 재로딩을 통해 번들링된 웹팩 파일을 사용할 수 있게 해주는 라이브러리
다음은 플러그인들에 대한 설치이다.
npm install -D html-webpack-plugin
yarn add -D html-webpack-plugin- html-webpack-plugin : HTML의 간소화 작성과 파일 이름에 해시를 매겨주는 라이브러리
다음은 Loader에 대한 설치이다.
npm install -D babel-loader url-loader
yarn add -D babel-loader url-loader- babel-loader : 바벨을 적용하기 위한 Loader
- url-loader : 이미지 파일을 webpack에 포함하기 위한 Loader
※ ts-loader를 설치하지 않았는데 babel만으로도 typescript를 빌드할 수 있기 때문에 굳이 설치하지 않았다. 또한 ts-loader는 HMR을 지원하지 않는다. 참조
Webpack 설정 파일 작성
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: ["./src/index.tsx"],
output: {
path: path.join(__dirname, "./dist"),
publicPath: "auto",
filename: "[name].[contenthash].js",
clean: true
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx", ".css", ".scss"],
alias: {
"@": path.resolve(__dirname, "src")
}
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)?$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.(png|jpe?g|gif)$/i,
use: {
loader: "url-loader",
options: {
publicPath: "/",
name: "[name].[ext]?[contenthash]",
limit: 10000
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./public/index.html"
})
]
};먼저 제일 위에 Lint Off는 Require문을 사용하기 위해 해당 File에서만 Off를 시켰다.
다음으로 output 타입에서 contenthash를 볼 수 있을텐데 번들링되는 파일을 해시값으로 바꿔주는 것이다.
이는 hash, chunkhash, contenthash로 표현이 가능하다.
관련해서는 이 블로그 글을 참조바란다.
마치며
사실 이전 GitHub에 Webpack과 Babel 그리고 TypeScript를 이용할 수 있는 BolierPlate를 만들어놨었다. 하지만 빠르게 TypeScript 설정을 할 수 있었던 awesome-typescript-loader가 최신 버전을 지원하지 않는 것을 알게 되었다.
awesome-typescript-loader@2.x aims to support only typescript@2.x and webpack@2x, if you need old compilers please use 1.x or 0.x versions.
실제로 ts-loader의 사용량이 더 많기도 했던 것 같다.
또한 babel7에서도 typescript를 지원하면서 라이브러리 선택에 많은 고려사항이 생겼다. 앞으로도 변화 뉴스에 민감해져야겠다는 생각이 들었다.
