- --save-dev : 개발환경에서만 사용되는 라이브러리라는 것을 명시 - npm
- --dev : 개발환경에서만 사용되는 라이브러리라는 것을 명시 - yarn
1. package.json 생성
npm init
2. React
- react
- react library
- react-dom
- webapp, browser, dom 관리
npm 설치
npm install react react-dom
yarn 설치
yarn add react react-dom
3. Babel
- @babel/core
- 리액트는 ES6를 사용하므로 여러 브라우저에서 사용가능하도록 ES5문법으로 바꿔준다.
- @babel/preset-react
- jsx에서 javascript 바꿔준다.
- @babel/preset-env
- ES6에서 ES5로 바꿔준다.
- ES6 뿐 아니라 브라우저에 따라 알아서 컴파일
- babel-loader
- 자바스크립트 파일을 babel preset/plugin과 webpack을 사용하여 ES5로 컴파일 해주는 plugin
- jsx에서 javascript로 컴파일
- html webpack plugin
npm 설치
npm install @babel/core babel-loader @babel/preset-react @babel/preset-env --save-dev
yarn 설치
yarn add @babel/core babel-loader @babel/preset-react @babel/preset-env --dev
4. Webpack
- webpack
- 모든 리액트 파일을 하나의 컴파일된 하나의 자바스크립트 파일에 넣기 위해
- webpack-dev-server
- live reload
- webpack-cli
- build 스크립트를 통해 webpack 커맨드를 사용하기 위해
- html-webpack-plugin
- 나중에 webpack.config.js에서 사용할 플러그인
npm 설치
npm install --save-dev webpack webpack-dev-server webpack-cli html-webpack-plugin
yarn 설치
yarn add webpack webpack-dev-server webpack-cli html-webpack-plugin --dev
4-1 용어 설명
- Loaders
- 코드 불러옴
- transform the source code of a module.
* style-loader css를 dom에 추가- sass-loader SASS파일을 CSS로 컴파일
- babel-loader babel로 javascript 코드를 transpile
- do the pre-processing transformation of virtually any file format when you use sth like require("my-loader!./my-awesome-module") in your code
- Plugins
- 컴파일러
- Webpack의 핵심 기능
- Webpack은 기본적으로 대부분의 source 코드를 bundle파일로 번환한다.
- loader가 부족하면 pluging을 사용하여 webpack의 기능을 추가한다.
- preset
- plugin의 집합
- plugin이 필요할 때마다 매번 webpack에서 설정하는 것은 귀찮은 일이므로 plugin들을 모아놓은 preset을 한번에 추가하여 관리할 수 있습니다.
예를들어 위의 그림을 설명하겠습니다. 먼저 원래의 동작 먼저 보겠습니다. css loader에 의해 css파일에서 css코드들을 부릅니다. 그리고 csso loader에 의해 최적화 작업과 text를 추출하는 plugin에 의해 style.css라는 파일에 원하는 css 코드를 담습니다
webpack 설정이 들어가면, text plugin에 의해 css 파일에서 css 코드를 추출하고 webpack 안의 csso plugin에 의해 중복되는 코드를 최적하여 style.css에 담게됩니다.
정리하면 최적화를 둘 다 하지만 webpack plugin이 조금 더 밀도있는 작업을 하는 것을 알 수 있습니다.
4-2 webpack.config
- webpack을 사용하기 위한 설정파일
webpack.config.js
const path = require('path') // core nodejs 모듈 중 하나, 파일 경로 설정할 때 사용
const HtmlWebpackPlugin = require('html-webpack-plugin') // index.html 파일을 dist 폴더에 index_bundle.js 파일과 함께 자동으로 생성, 우리는 그냥 시작만 하고싶지 귀찮게 index.html 파일까지 만들고 싶지 않다.!!
module.exports = { // moduel export (옛날 방식..)
entry: './index.js', // 리액트 파일이 시작하는 곳
output: { // bundled compiled 파일
path: path.join(__dirname, '/dist'), //__dirname : 현재 디렉토리, dist 폴더에 모든 컴파일된 하나의 번들파일을 넣을 예정
filename: 'index_bundle.js'
},
module: { // javascript 모듈을 생성할 규칙을 지정 (node_module을 제외한.js 파일을 babel-loader로 불러와 모듈을 생성
rules: [
{
test: /\.js$/, // .js, .jsx로 끝나는 babel이 컴파일하게 할 모든 파일
exclude: /node_module/, // node module 폴더는 babel 컴파일에서 제외
use:{
loader: 'babel-loader' // babel loader가 파이프를 통해 js 코드를 불러옴
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html' // 생성한 템플릿 파일
})
]
}
위의 설정들을 크게 살펴보자
- path
- 파일의 경로를 지정
- __dirname : 노드 변수로 현재 모듈의 디렉토리를 리턴합니다.
- HtmlWebpackPlugin
- 컴파일 이후 index.html 파일을 생성
- template에 지정된 index.html에 모든 static 파일들을 긁어모은 index_bundle.js 파일을 `<script src='index_bundle.js'></script>` 형식으로 연결해줍니다.
- module.export
- 출력할 모듈
-
더보기
ate에 지정된 index.html에 모든 static 파일들을 긁어모은 index_bundle.js 파일을
`<script src='index_bundle.js'></script>` 형식으로 연결해줍니다.
- entry
- 컴파일 할 파일
- index.js
- output
- 컴파일 이후 파일
- __dirname/dist/index_bundle.js
- module
- 모듈의 컴파일 형식
- es6 문법을 es5으로 바꾸기 위해 webpack이 js, jsx를 포함한 모든 파일을 babel을 통하여 컴파일 시킵니다.
- plugin
- 사용할 plugins
- 여기서는 htmlwebpackPlugin을 사용하여 index.html과 index_bundle.js에 연결해줍니다.
- html-webpack-plugin은 script 태그안에 넣은 webpack 번들 파일과 함께 html5 파일을 생성합니다.
- HTMLWebpackPlugin이 index.html의 script 태그안에 컴파일된 bundle 파일을 심어줄 것입니다.
- new HtmlWebpackPlugin()을 위의 예시처럼 그냥 사용하는 것도 좋지만 이렇게 템플릿을 만들어 놓으면 커스터마이징 하기 편합니다.
4-3 정리
5. index.html
다음은 웹페이지의 가장 기본이 될 index.html 파일을 src/index.html 경로로 아래와 같이 생성하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>6. Babelrc
- babel-preset-env와 babel-preset-react와 같이 preset을 사용하고 싶으면 root폴더에 .babelrc을 생성하여 사용하고자할 preset을 설정하면 됩니다.
- plugin들을 각각의 npm dependency를 가지고 있습니다. 하지만 설치시 매번 .bablrc에 설정을 해야하므로 그 두가지를 모두 해결해줄 preset을 사용하면됩니다. preset을 설치하고 설정하므로서 preset이 가진 plugin들을 설정할 필요없이 사용할 수 있게 됩니다.
{
"presets": [
"@babel/env",
"@babel/react"
]
}@babel이 버전이 업데이트 되면서 더이상 babel-core 형태(-)의 dependency를 지원하지 않게되므로서 @babel/env 형태(/)를 사용해야 합니다.
index.js
root 경로에 index.js 파일을 생성합니다.
import React from 'react';
import ReactDom from 'react-dom';
import App from './Component/App';
ReactDom.render(<App/>, document.getElementById("root"));Componet/App.js
Component 폴더 생성 후 App.js 파일을 생성합니다.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<h1>React Test</h1>
)
}
}
export default App;package.json
script 부분에 추가합니다
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
이제 실행해보겠습니다.
yarn start
정상적으로 실행이 되면 성공입니다.
이번에는 프로젝트를 build 해보겠습니다.npm run build
그러면 /dist 폴더가 생성되면서 index_bundle.js와 index.html이 생성됨을 알 수 있습니다.
index.html을 먼저 보면 <script type="text/javascript" src="index_bundle.js"></script> script 태그가 body안에 생성되어 있는 것을 확인할 수 있습니다. 이는 webpack.config.js 파일의 plugins 에서 Htmlwebplugin의 도움으로 template: './src/index.html' 템플릿에 컴파일 된 번들 파일이 script 태그로 자동적으로 들어가게 되는 것입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="index_bundle.js"></script>
</body>
</html>index_bundle.js 파일을 살펴보면 js, jsx 파일들이 es6에서 es5로 컴파일하여 알아서 순서대로 묶어서 하나의 파일로 넣어 줌을 알 수 있습니다. 이는 자바스크립트의 모듈 태그 순서에 따라서 문제를 손쉽게 해결 해줄 수 있습니다.
에러
프로젝트 실행 시
Error: Cannot find module 'webpack-cli/bin/config-yargs'
이런 오류가 발생한다면 webpack, webpack-cli, webpack-dev-server이 서로 버전에 안맞아서 발생하는 오류입니다.
"webpack": "^4.41.3",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
해당 버전으로 실행해보길 바랍니다.
출처
velog.io/@pop8682/번역-React-webpack-설정-처음부터-해보기