webpack, babel, reactjs 환경셋팅하기
1. 프로젝트 폴더 만들기
- 기본적으로 node 와 npm 이 설치되어 있어야 한다.
1) 폴더 구성
mkdir react-testcd react-testnpm init -y
- npm init 을 통해 package.json 파일을 생성한다
mkdir distcd disttouch index.html
- build 후 생성된 파일을 관리 하기 위하여 dist 폴더를 생성한다
<!DOCTYPE html> <head> <title>The Minimal React Webpack Babel Setup</title> </head> <div id="app"></div> <script src="/bundle.js"></script>
- bundle.js 는 webpack을 통해 빌드된 파일이다.
2. webpack 설치하기
- webpack 을 이용하여 모듈화하고 빌드를 진행한다.
npm install --save-dev webpack webpack-dev-server webpack-cli
1) package.json
..."scripts": { "start": "webpack-dev-server --config ./webpack.config.js --mode development", ...},...
- webpack-dev-server 를 사용하기 위한 설정이다.
2) webpack.config.js
module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist' }};
- webpack을 사용하기 위한 설정파일이다.
3) index.js
- 어느 정도 설정이 되었으니 테스트 해보자
- index.js 파일을 만든다
mkdir srccd srctouch index.js//폴더구조- dist-- index.html- node_modules- src-- index.js- package.json- webpack.config.js
- src/index.js
console.log('Hello World');
4) npm start
- 서버를 띄우면 로그가 찍히는 것을 볼 수 있다
3. babel 설치하기
- ES6 를 사용하기 위해 바벨이 필요하다. 무엇보다 react개발에 jsx 를 컴파일하는 일로 바벨을 사용한다
npm install --save-dev babel-core babel-loader babel-preset-env
1) jsx 파일을 js로 변경하기 위한 설정
npm install --save-dev babel-preset-stage-2
2) webpack설정과 package.json이 바벨 변화를 확인하기 위한 설정
npm install --save-dev babel-preset-react
3) package.json
..."keywords": [],"author": "","license": "ISC","babel": { "presets": [ "env", "react", "stage-2" ]},"devDependencies": {...
4) webpack.config.js
module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] } ] }, resolve: { extensions: ['*', '.js', '.jsx'] }, output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist' }};
5) .babelrc
- root 폴더에 .babelrc 라는 설정파일을 만든다
{ "presets": [ "env", "react", "stage-2" ]}
4. react 설치하기
npm install --save react react-dom
1) src/index.js
import React from 'react';import ReactDOM from 'react-dom';const title = 'My Minimal React Webpack Babel Setup';ReactDOM.render( <div>{title}</div>, document.getElementById('app'));
5. HMR 설치하기
- 개발하는동안 실시간으로 서버에 변화를 반영할 수 있다.
npm install --save-dev react-hot-loader
1) webpack.config.js
const webpack = require('webpack');module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] } ] }, resolve: { extensions: ['*', '.js', '.jsx'] }, output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { contentBase: './dist', hot: true }};
2) src/index.js
import React from 'react';import ReactDOM from 'react-dom';const title = 'My Minimal React Webpack Babel Setup';ReactDOM.render( <div>{title}</div>, document.getElementById('app'));module.hot.accept();
'Front-End > ReactJs' 카테고리의 다른 글
| [ReactJs] 리엑트 폼 요소 정의 (0) | 2018.08.07 |
|---|---|
| [ReactJs] 리액트 폼 이벤트 설정 (0) | 2018.08.05 |
| [ReactJs] 리액트 이벤트와 컴포넌트 데이터 교환 (0) | 2018.08.05 |
| [ReactJs] 리액트 컴포넌트 라이프사이클 (0) | 2018.08.05 |
| [ReactJs] 리액트 상태저장 컴포넌트와 상태비저장 컴포넌트 (0) | 2018.08.05 |
리딩리드