2. react + webpack + babel로 개발 환경 구축하기 (javascript)
프로젝트 생성
mkdir react-example && cd react-example && yarn init -y1. react, react-dom 설치
$ yarn add react, react-dom- react: React 라이브러리를 불러옵니다.
- react-dom: DOM rendering을 위한 ReactDOM을 담고 있습니다.
2. webpack 관련 설치
$ yarn add -D webpack webpack-dev-server webpack-cli- webpack: webpack 의 core 패키지로, 주요 스크립트가 포함되어있습니다.
- webpack-dev-server: hot-loader 같이 코드가 바뀌는 것을 감지해서 서버를 재시작시켜줍니다. (개발 생산성✔️👏)
- webpack-cli: command line에서 webpack을 실행시킬 수 있도록 해줍니다.
3. 실행해보기 위해서 파일 추가해보기
- ./public/index.html
<!DOCTYPE html>
<html lang="en">
<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>React-Example</title>
</head>
<body>
<div id="root">Hello world:)</div>
<script src="../src/index.js"></script>
</body>
</html>- ./src/index.js
const innerTextOfRoot = document.getElementById('root').innerText;
alert(innerTextOfRoot);이제 webpack으로 실행시켜봅시다.
시작 전에 package.json에 scripts태그를 아래처럼 추가해줍니다.
{
...
"scripts" : {
"start": "npx webpack serve --mode development --port 3000",
},
...
}그리고 아래처럼 root에서 명령 실행!
$ yarn start 
콘솔에 찍힌 것처럼 http://localhost:3000/로 들어가보면 아래처럼 프로젝트의 root가 나오는 것을 볼 수 있습니다.
우선은 webpack을 설치해서 server를 실행해보는 것까지 완료!
ReactDOM을 이용해서 페이지를 띄어볼까?
물론 html 파일에서 react, react-dom을 불러와서 스크립트를 모듈화하여 작성해나가는 방법도 있겠지만, create-react-app 에서 하는 방식처럼 해볼 예정입니다.
파일 추가
./public/index.html 수정
body 태그 안에 id값이 root인 div 엘리먼트만 남겨두고 다 지울 거에요.
이유는 웹팩에서 javascript 파일로 시작할 것이기 때문에 script 태그는 필요없기 때문! <!DOCTYPE html>
<html lang="en">
...
<body>
<div id="root"></div>
</body>
</html>./src/index.js
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));./src/App.js
class를 통해서 컴포넌트를 만들어줍니다.
(물론 React 공식문서에는 class를 지양하라고 나오지만 여기에서는 우선 ES6+문법을 사용해서 예제를 진행해보겠습니다.)import React from 'react';
class App extends React.Component {
render() {
return <div>Hello world :) </div>
}
}
export default App;webpack.config.js 설정 📌
webpack에서 서버를 시작할 때 index.js에서 시작하고 싶기 때문에 이에 관련하여 간단한 설정을 해볼 것입니다.
./webpack.config.js
웹팩 설정파일은 commonJS로 작성하는데, 기본적으로 객체를 넘겨주는 형태입니다.
그 안에 webpack에서 필요한 key 값을 아래처럼 정해놨습니다.
더 자세하게 알고 싶다면 Webpack 공식 홈페이지 참고
entry: 시작점 지정 (웹팩이 내부적으로 dependency 그래프를 만들 때의 시작점 파일)output: 빌드되어 나오는 결과물이 return되는 곳module: javascript 이외의 자원들을 javascript에 가져다 쓸 수 있도록 loader를 load 해주는 곳plugins
지금은 우선적으로 index.js 로 Webpack 서버를 시작하고 싶다는 목표가 있으므로 아래처럼 간단하게 설정 해볼 것입니다.
./webpack.config.js
module.exports = {
entry: {
app: './src/index.js'
}
}그리고 실행했는데 아래처럼 에러가 나오네요...
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import ReactDOM from 'react-dom';
|
> ReactDOM.render(<App />, document.getElementById('root'));
|우선, commonJS만을 읽을 수 있는 웹팩으로서는 아래처럼 생각할 수 있을 것입니다.
- import, export 키워드가 뭐지?.. (예전의 webpack은 그랬겠지만 이 부분은 Webpack 4부터 인식가능하다고 함)
- 이건 또 .... 뭐야?.. javascript에 <>이런게 있었나?
-> 어떻게 해결하지? : 그래서 존재하는게 babel 📌
Babel 설정
우선 패키지부터 설치해야합니다.
$ yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader- @babel/core: 핵심 dependency로, 주요 스크립트가 포함되어있습니다.
- @babel/preset-env: babel 플러그인 설정들이 모아져있다. 즉, 모든 es6+문법을 es5로 컴파일링할 수 있도록 도와주는 dependency입니다.
- @babel/preset-react: 리엑트의 jsx를 javascript code로 바꿔줍니다.
- babel-loader: babel과 webpack을 같이 사용할 수 있게 해줍니다.
그리고 babel 이랑 의사소통할 수 있는 파일인 .babelrc 을 root에 만들어줍니다.
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}이해가 안된다면 아래처럼 생각해보면 되요!
"@babel/preset-env"안에 모든 babel 플러그인 설정들이 있으니 다 사용하게 해줘! 그리고"@babel/preset-react"도 추가해뒀는데 react에서 사용하는 jsx 코드도 인식하게 해줘!
이제 webpack이 babel을 인식할 수 있도록 loader에 babel-loader를 추가해줘야합니다.
./webpack.config.js
module.exports = {
entry: {
app: './src/index.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
}- test: 어떤 값을 인식해야하는지 포맷을 알려주는 곳
- exclude:
/node_modules은 제외하고 loading 해줘! 말해주는 곳 - use: 어떤 패키지를 사용해서 로드하는지 알려주는 곳.
이렇게 하고 yarn start하면 원하는대로 나오지 않는다. 그 이유는 바로 html 파일을 로딩할 수 있게 해주는 플러그인을 설치하지 않았기때문!
html-webpack-plugin 설치
yarn add -D html-webpack-plugin- webpack.config.js 수정
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const srcDir = path.resolve(__dirname, './src');
const publicDir = path.resolve(__dirname, './public');
module.exports = {
...,
plugins: [
new HtmlWebpackPlugin({
template: publicDir + '/index.html',
filename: './index.html'
}),
]
};그리고 실행해보기
$ yarn start드디어 원하는 모습대로 나왔다~~!
마치며,,
👏👏👏👏👏 여기까지 개발서버 구축하는 것 완료했습니다.
다음 포스트는 typescript, 상대경로 설정하는 부분을 다루겠습니다.
전체 코드는 react-boilerplate-webpack-babel 에서 볼 수 있습니다.
