웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.
아래 그림과 같이 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 합니다.
이 전에 포스팅에서 알아봤던 크로스 브라우징 이슈를 해결하기 위해 생겨난 툴로, ES6이상 버전의 javascript, typescript,jsx등 다른 언어로 분류되는 언어들에 대해 모든 브라우저에서 동작할 수 있도록 호환성을 지켜줍니다. Babel은 각 브라우저의 맞는 버전으로 코드를 트랜드파일해 각 브라우저에서 개발자가 의도한 대로 동작할수 있게 만들어 주는 역할을 합니다.
mkdir webpack-babel-react-cross-browser && cd webpack-babel-react-cross-browser
npm init -y
npm install react react-dom
//src/Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
//src/App.js
import React from "react";
const App = () => <div>Hello, Webpack!</div>;
export default App;
모듈 번들러를 위한 webpack 패키지 입니다.
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
webpack - 모든 리엑트 파일을 하나의 자바스크립트 파일에 합치는 모듈 번들러 webpack
webpack-cli - webpack의 커멘드 라인 인터페이스
webpack-dev-server - webpack의 개발 서버 제공
html-webpack-plugin - html관련 plugin, 템플릿을 지정, favicon 설정
const HtmlWebpackPlugin = require('html-webpack-plugin');
const port = process.env.PORT || 3000;
module.exports = {
// 개발환경 mode : "development|production" 개발 환경과 배포 환경을 정할 수 있음
mode: 'development',
// react의 시작 경로
entry: './src/index.js',
//모듈화 한 웹팩의 script버전, default : es6
target: ['web', 'es5'],
// webpack과 babel을 통해 번들링되는 경로
output: {
path: path.join(__dirname, '/dist'), //root dist폴더를 생성
filename: 'bundle.[hash].js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/, //babel이 컴파일할 파일 , js, jsx 를 사용한다. ts|tsx
exclude: /node_modules/, //node_modules는 babel컴파일에서 제외
use: {
loader: 'babel-loader', //babel-loader를 통해 번들링 .babelrc
},
},
// html관련 plugin
//minimize: true를 통해 html 코드를 최적화
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html', //결과로 나올 템플릿
}),
],
// 개발 서버 설정
devServer: {
host: 'localhost',
port: port,
open: true, //개발 서버 실행 시 브라우저 오픈
},
};
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader html-loader
@babel/core - 리액트에서 사용하는 ES6+ 문법을 ES5문법으로 트랜스파일링
@babel/preset-env - ES6+ 문법을 ES5로 트랜스파일링 하기 위한 플러그인 모음
@babel/preset-react - 리액트의 jsx를 javascript 문법으로 트랜스 파일링
babel-loader - es6 를 es5 로 바꿔주는 바벨을 웹팩에서 사용할 수 있게 해줍니다
html-loader: 웹팩이 html을 읽을 수 있게 해줍니다.
root 폴더에서 .babelrc 파일을 만들어 다음과 작성해 줍니다.
{
// Babel presets적용
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve", //webpack 개발 서버 실행
"build": "webpack" //webpack 빌드
},
자 이제 babel webpack react 세팅은 끝이 났습니다.
터미널에 npm start 통해 webpack을 실행시키고 ES6+를 지원하지 않는 IE11을 실행시키면?
이상하게도 sciprt1002 구문 오류가 나타나게 됩니다.
npm run build를 통해 번들링된 파일을 살펴보게 되면 화살표 함수가 떡하니 있습니다.
Babel과 Webpack을 모두 셋팅 했는데 왜 이런 결과가 나오게 되는 걸까요...
다음 포스팅에서 이를 해결하고 ES6 문법을 모두 ES5로 바꿔보겟습니다.