Webpack으로 React 개발환경 설정하기
첫 일요스터디로 제가 주제를 정해온 주제를 가지고 스터디하는 시간을 가졌습니다! 그동안 개념으로만 알고 있었던 webpack을 꺼내어 면밀히 살펴보고 스터디원과 함께 공유하는 시간을 가졌는데요. create-react-app을 통해 자동으로 깔렸던 webpack은 왜 필요한 것인지, 어떤 역할을 하고 있었는지 알 수 있었습니다. 그리고 빈 폴더로 시작해서 webpack으로 react 개발환경을 설정해보았습니다.
webpack에 대한 정리는 이 전 포스팅에 남겨두었습니다.
https://jihye-dev.tistory.com/10
[webpack] 웹팩의 개념과 활용
웹팩의 개념 웹팩은 자바스크립트 정적 모듈 번들러로 그림과 같이 애플리케이션을 구성하는 여러 개의 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리다. 웹팩을 사용
jihye-dev.tistory.com
오늘은 webpack으로 React 개발환경을 설정하는 과정을 정리하겠습니다.
1. 작업할 폴더를 만들고 package.json을 만들어 초기화 하기
mkdir webpack-study
// package.json 만들기
npm init -y
2. 바벨 설정하기
// 개발 단계에서만 사용되기 때문에 -D 옵션을 추가해 devDependencies에 설치되도록 하기
npm i -D @babel/core @babel/preset-env @babel/preset-react🔥 바벨이 필요한 이유 🔥
바벨은 트랜스파일러로 브라우저에 호환시키기 위해 최신 버전의 자바스크립트를 구형 버전의 자바스크립트로 변환하는 역할을 하기 때문
babel.config.json 파일 추가하기
// babel.config.json
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}🔥 babel.config.[js/json] vs .babelrc 🔥
babel.config.[js/json]: 여러 패키지 디렉토리를 가진 프로젝트에서 하나의 바벨 설정을 할 때 사용된다.
.babelrc: 파일 디렉토리의 하위 집합에서 특정 변환/플러그인을 실행하려는 경우 유용하다. 프로젝트 내 서드파티 라이브러리가 바벨에 의해 변환되지 않기를 원할 수도 있기 때문이다.
3. 웹팩 설정하기
// webpack-cli: 웹팩의 커맨드라인 인터페이스, webpack-dev-server: 개발 서버를 제공
npm i -D webpack webpack-cli webpack-dev-server
➕ webpack.config.js 추가하기
// webpack.config.js
const path = require('path');
module.exports = {
// 처리하고자 하는 파일
entry: './src/index.js',
output: {
// 아웃풋으로 만들어지는 파일 이름
filename: 'js/[name].js',
// __dirname = 현재 파일의 경로, path: 현재 파일의 경로/assets를 나타냄
path: path.resolve(__dirname, 'assets'),
},
};
➕ babel-loader, html-loader 추가하기
// babel-loader: 바벨을 웹팩에서 사용할 수 있게 해줌, html-loader: 웹팩이 html을 읽을 수 있게 해줌
npm i -D babel-loader html-loader
webpack.config.js에 loader 적용하기
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
// 빌드할 파일의 확장자
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
],
},
// ...
};
➕ 플러그인 추가하기
npm i -D html-webpack-plugin
webpack.config.js에 플러그인 적용하기
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
}),
],
// ...
};
➕ 개발 서버 제공 패키지 설치하기
npm i -D webpack-dev-server
webpack.config.js에 개발 서버 적용하기
// webpack.config.js
const port = process.env.PORT || 3000;
module.exports = {
// ...
devServer: {
host: 'localhost',
port: port,
open: true,
},
};
package.json 스크립트 변경하기
// package.json
{
// ...
"scripts": {
// webpack.config.js에서 설정했던 mode를 이곳에서 설정할 수 있음
"start": "webpack-dev-server --mode=development",
},
// ...
}
✅ webpack.config.js의 전체 코드 보기
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const port = process.env.PORT || 3000;
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'assets'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
}),
],
devServer: {
host: 'localhost',
port: port,
open: true,
},
};
4. 리액트 설치하기
npm i react react-dom
src/index.js, src/App.js, public/index.html 작성하기
// src/index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const app = document.getElementById('app');
const root = createRoot(app);
root.render(<App />);// src/App.js
import React from 'react';
const App = () => <div>Hello, Webpack!</div>;
export default App;// public/index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Webpack-for-react</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
5. npm start를 통해 애플리케이션 실행하기
index.html 템플릿에 번들된 js/main.js가 적용된 것을 확인할 수 있습니다.
참고 자료
https://velog.io/@syoung125/TIL-babel.config.js-vs-.babelrc%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90