최근 회사에서 플랫폼을 리뉴얼을 해야 하는데 세팅과 개발을 누가 이끌어 갈건지에 대해 얘기가 나왔고 이전에 혼자 webpack과 babel을 이용해 세팅해본적이 있는 내가 하겠다고 하여 세팅을 맡게 되었다.
그래서 React를 사용하기위해 webpack babel이 왜 필요한데?
react는 기본적으로 js코드 안에 html을 삽입하는 jsx 문법으로 되었이다.
브라우저가 jsx문법을 읽을 수가 없기에 우리는 webpack과 babel을 이용해 jsx문법을 html문법으로 변환 해주어야 한다.
React 관련 라이브러리 설치
npm i react react-domWebpack 관련 라이브러리 설치
npm i -D webpack webpack-cli webpack-dev-serverbabel 라이브러리 설치
npm i -D @babel/core @babel/cli @babel/preset-react//index.js
import React from "react";
import ReactDOM from "react-dom";
const index = () => {
return <App/>;
};
ReactDOM.render(<index />, document.getElementById("root"));
// /src/App.js
import React from "react";
import ReactDOM from "react-dom";
function App(){
return
(
<div>
React, webpack, babel 직접 세팅하기
</div>
)
};
export default App;html 파일 생성
// public/index.html
<!DOCTYPE html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack babel React rjsdnql123</title>
</head>
<body>
<div id="root"></div>
</body>
</html>// webpack
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//webpack 이 읽어야 할 루트 파일
entry: "./index.js",
mode: "development",
output: {
// 빌드시 나오게될 파일 설정
path: path.join(__dirname, "/dist"),
filename: "[hash]_bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
//세팅해둔 바벨 사용
loader: "babel-loader"
}
}
]
},
plugins: [
//html 파일을 읽기 위한 플러그인
new HtmlWebpackPlugin({
template: "./public/index.html"
})
],
devServer: {
// 개발 환경 설정
open: true,
host: "localhost",
port: 3000,
historyApiFallback: true,
allowedHosts: "all"
}
};
.babelrc
// .babelrc
{
"presets": [
"@babel/env",
"@babel/react"
]
}pakage.json
"scripts": {
"start": "webpack serve --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},이제 모든 셋업은 끝이 났다. npm start 를 입력하게 되면 웹팩과 바벨이 실행되어 화면이 나오게 된다.
다음장에서는 redux 와 saga 그리고 babel css를 설정해 주도록 하자
