jwj3400
[Front] Webpack과 Babel이란? 본문
create-react-app은 리액트 개발에 필요한 웹팩, 바벨, 테스트 라이브러리 등 다양한 환경을 한 번에 제공해줌
Webpack
- 여러개의 파일을 하나로 합쳐주는 모듈 번들러(번들러는 의존성이 있는 모듈들을 하나의 파일로 통합시켜주는 도구) 번들러를 사용하는 이유?
1. 한번에 많은 요청을 하지 않아도 된다.
예를 들어 한 웹페이지에서 사용하는 자바스크립트 파일이 10개정도 된다고 가정해보자. 그렇다면 웹 페이지가 로드될 때 자바스크립트 파일 10개롤 모두 네트워크를 통해 요청해서 받아와야 해서 네트워크 병목현상이 발생할 수 있다.
2. 모듈 단위로 개발하여 유지보수성을 높일 수 있다.
하나의 파일에 모든 자바스크립트 코드가 있다고 할때 그 코드가 몇 천 라인, 몇 만 라인인지는 모르지만 우리가 수정해야 할 코드에 접근하는데 어려움을 느낄 수 있다. 그렇기 때문에 번들러를 사용하면 우리도 이해하기 쉽도록 코드를 모듈 단위로 구분해 가독성과 유지보수성을 효율적으로 개선할 수 있다. - css loader 기능: jsx와 같이 자바스크립트를 이용한 마크업 스타일링을 입힐 때는 import "global.css"와 같이 css 파일을 임포트함, 이렇게 css파일을 모듈로 부르기 위해 사용하는 로더가 css-loader임
- jsx 변환 작업: React에서 HTML을 표현할 때, JSX를 사용 빌드 시 Babel에 의해 자바스크립트 언어로 변환되고, Webpack은 JSX를 해석해주는 babel을 적용
- file loader 기능: 웹팍이 파일을 로딩할 수 있도록 도와줌
- html-webpack-plugin: 번들링된 html파일에 css와 js파일들을 추가해줌
$npm i -D webpack webpack-cli webpack-dev-server
$npm i -D babel-loader css-loader file-loader
$npm i -D html-webpack-plugin mini-css-extract-plugin
$npm i -D sass sass-loader
- webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const prod = process.env.NODE_ENV === 'production';
module.exports = {
// 모드에 따라 웹팩에서 내장 최적화 제공
mode: prod ? 'production' : 'development',
// 소스 맵 생성 여부 및 방법 설정
devtool: prod ? 'hidden-soure-map' : 'eval',
// 번들링을 시작할 파일
entry: {
index: './src/index.js',
},
// 다양한 모듈들(js, image, css 등)을 처리하는 방법 결정
module: {
rules: [
{
// 처리할 모듈 형식 결정
test: /.js$/,
// 이 모듈에 사용할 loader
use: 'babel-loader',
// 제외할 파일들
exclude: /node_modules/,
},
{
test: /\.(sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/dist/static/style/',
},
},
'css-loader',
'sass-loader',
],
},
{
test: /\.(png|jpg|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'static/images',
},
},
],
},
],
},
// 빠르게 개발할 수 있도록 개발서버 제공
devServer: {
historyApiFallback: true,
inline: true,
port: 3000,
hot: true,
publicPath: '/',
},
// 번들링 된 파일이 생성될 위치 설정
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'static/js/bundle.js',
},
// 적용할 플러그인 목록
plugins: [
new HtmlWebpackPlugin({ template: `./public/index.html` }),
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({ filename: 'static/style/main.css' }),
],
};
Babel
- 트랜스파일러: 틀정언어로 작성된 코드를 비슷한 다른 언어로 변환
ES6의 기능을 제공하지 않는 브라우저에서 ES5 코드로 변환하여 코드를 실행해야할 필요가 있음 - babel은 wepback과 같은 빌드 시스템과 함께사용, 바벨을 동작하게 하려면 plugin을 설치해야함(plugin이 컴파일을 함)
- 바벨을 웹팩과 연결하면 바벨이 코드들을 트랜스파일링 하면서 웹팩을 통해 모듈을 번들링함
- babel/core: 바벨의 핵심기능이 담겨있는 기본 라이브러리
babel/preset-"": ESNext 코드를 컴파일 해주는 플러그인 모음 설치
(env: 기본 js 코드 검사, react: 리액트 코드 검사)
babel-loader: 웹팩과 바벨을 연동
@babel/core @babel/preset-env @babel/preset-react babel-loader
'코딩 > web' 카테고리의 다른 글
[Front] React Router (0) | 2023.08.23 |
---|---|
[Front] CSS Margin, borader, padding 차이 (0) | 2023.08.22 |
[Front] CSS 중앙 잡기 (0) | 2023.08.16 |
[Front] CSS 포지션 (0) | 2023.08.14 |
[Front] Css 디자인 Flex/Grid (0) | 2023.08.12 |