npx create-react-app 폴더이름
위 명령어를 이용하면 리액트 프로젝트를 쉽게 만들 수 있다.
필요한 파일들을 모두 설치해주고 저장할 때마다 웹페이지가 실시간으로 바뀌는 설정까지도 해줘서 편하다.
웹팩을 이용해서 이를 따라할 수 있는데
디테일한 설정을 마음대로 할 수 있고
요즘 가장 인기 있는 번들러 웹팩을 어떻게 쓰는지 배울 수 있어 의미 있는 작업이 되지 않을까 싶다.
1. 프로젝트 폴더를 만들고 폴더 안에서 npm init -y를 입력한다.
2. 아래의 package.json 내용을 참고해서 필요한 모듈들을 설치한다.
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"html-webpack-plugin": "^4.4.1",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
dependencies 안에 들어가게 하려면 npm i 모듈이름을 입력하고
devDependencies 안에 들어가게 하려면 npm i -D 모듈이름을 입력한다.
react와 react-dom을 제외하고는 개발 환경에서만 쓰이는 모듈이기 때문에 devDependencies에 둔다.
3. babel.config.js 파일을 생성하고 아래의 내용을 입력한다.
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
};
웹팩에서 처리하는 바벨에 대한 옵션을 설정한다.
4. webpack.config.js 파일을 생성하고 아래의 내용을 입력한다.
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'none',
entry: './src/index.js', // index.js부터 시작해서 여기에 import된 모든 파일들이 bundle.js에 담긴다.
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'), // dist 폴더에 build된다.
},
module: {
rules: [
{
test: /\.js$/, // .js 확장자로 끝나는 파일만 babel-loader를 사용한다.
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
// 먼저 css-loader가 css를 가져온다.
// 다음으로 style-loader가 html head에 style 태그를 넣어준다.
use: ['style-loader', 'css-loader'],
},
],
} ,
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html', // src/index.html 파일을 읽어서
filename: 'index.html', // output으로 설정한 bundle.js를 추가하고 dist/index.html 파일을 만든다.
}),
],
};
하나씩 살펴보자.
mode는 'none' 이외에도 'production'과 'development'로 설정할 수 있다.
각 목적에 따라 컴파일 방식이 달라지니 개발 환경에서는 development로 설정하자.
더 빨리 컴파일된다고 한다.
entry는 번들화시킬 파일이 무엇인지를 설정해준다.
index.js를 설정했으면 여기에서 import한 모든 모듈들을 포함한 bundle.js가 생성된다.
output에서는 번들된 파일의 이름과 경로를 설정할 수 있다.
module.rules에서는 어떤 파일들을 어떻게 변환해서 넣어줄 것인지를 설정할 수 있다.
plugins의 HtmlWebPackPlugin은 dist에 bundle.js 뿐만 아니라 bundle.js를 불러오는 index.html까지도 생성해주는 역할을 한다.
이때 template을 재료로 쓴다.
5. src 폴더에 index.html 파일을 생성하고 아래의 내용을 입력한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
6. src 폴더에 index.js 파일을 생성하고 아래의 내용을 입력한다.
import React from 'react';
import ReactDom from 'react-dom';
// 여기에 컴포넌트를 추가하려고 js나 css 파일을 import하면 bundle.js에 자동으로 포함 된다.
const Index = () => {
return (
<div>
Hello world
</div>
);
};
ReactDom.render(<Index />, document.getElementById('root'));
7. package.json에 다음의 scripts를 추가한다.
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
}
8. npm run build를 입력한다.
dist 폴더에 bundle.js 파일이 생성되고
HtmlWebPackPlugin 설정에 따라 bundle.js를 불러오는 스크립트 태그가 추가된 index.html 파일이 생성된다.
여기에 main.js와 main.css를 index.js에 컴포넌트로 추가해주면 아래와 같은 파일 구조를 만들 수 있다.
9. npm start를 입력한다.
임시로 빌드를 시킨 다음에 http://localhost:8080/에 개발 서버를 띄운다.
HtmlWebPackPlugin에서 설정한 index.html 파일을 자동으로 설정해주는 것 같다.
src에서 bundle.js에 포함된 파일을 수정할 때마다 create-react-app의 개발 서버와 마찬가지로 페이지를 새로고침해준다.
아래는 깃허브 주소다.
'Bundler > Webpack' 카테고리의 다른 글
| 웹팩에서 CSS를 모듈처럼 쓰는 방법 - CSS module (0) | 2020.11.24 |
|---|---|
| 자바스크립트로 웹 개발을 하기 위한 웹팩 설정 방법 (0) | 2020.11.23 |
| 웹팩 시작하기 (0) | 2020.08.29 |
