Webpack 4와 babel 7으로 react개발환경 셋업하기

이번 포스팅에서는 webpack 4와 babel 7을 이용하여 react 개발환경을 처음부터 구축해보려고 한다.

  1. 먼저 개발환경을 만들 새로운 디렉토리를 생성한다.
$ mkdir react-setting && cd $_

2. npm모듈을 사용하기 위해 package.json을 초기화한다.

$ npm init -y

명령어를 입력하면

다음과 같이 package.json에 설정된 내용이 표시된다.

3. npm을 이용해 webpack 4를 설치한다.

$ npm install --save-dev webpack webpack-cli
설치가 완료되면 다음과 같이 package.json파일 devDependencies에 webpack 4가 설치된 것을 볼 수 있다.

5. src 디렉토리를 생성하고 하위에 webpack으로 번들링 할 index.js파일을 생성하여 webpack을 실행한다.

./src/index.js

webpack 4는 entrypoint와 output을 별도로 설정하지 않아도

entry point는 ./src/index.js 파일로,

output은 ./dist/main.js로 인지하고 번들링해준다.

$ webpack

webpack을 실행하면 번들링 된 ./dist/main.js파일이 생성되어있을 것이다!

npm script를 이용하여 webpack을 실행하기 위해 package.json파일에

"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}

다음과 같은 내용을 추가하면 webpack 4의 최소한의 기본적인 환경 설정이 완료되었다.

webpack 4는 development mode와 production mode 두 가지 모드를 기본적으로 지원한다. 둘의 차이점은 development mode일 때는 minified가 되지 않고 production mode일 때만 minified처리가 된다는 점이다.

다음은 babel 7을 설치하고 적용할 차례이다.

  1. webpack을 설치했을 때와 마찬가지로 npm모듈을 이용해 babel을 설치한다.
npm install --save-dev @babel/core babel-loader @babel/preset-env
package.json에서 babel 7이 설치된 것을 볼 수 있다.

2. babel 설정 파일과 webpack설정 파일을 생성하고 기본 설정을 해준다.

index.js파일에

// index.jsconst arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;

이런 식으로 es6코드를 삽입하고

$ npm run build

명령어를 통해 webpack을 다시 실행하면 main.js파일에서 정상적으로 es6코드가 babel을 통해 트랜스파일링된 것을 볼 수 있다.

  • 만약 설정파일 없이 트랜스파일링을 하고 싶다면
$ webpack --mode production --module-bind js=babel-loader

다음과 같이 웹팩 명령어를 입력하면 된다.

webpack과 babel의 기본 설정이 끝났으니 이제 본격적으로 react 개발 환경을 구축해볼 것이다.

  1. 먼저 react모듈을 설치한다.
$ npm install --save-dev react react-dom @babel/preset-react

2. .babelrc파일과 webpack.config.js파일을 수정한다.

preset에 preset-react를 추가한다
react component인 jsx파일도 웹팩에서 번들링하도록 추가한다

3. App.js파일을 생성하고 index.js에서 import한다.

// ./src/index.jsimport App from “./App”;

4. html 플러그인을 설치하고 html파일을 생성한다.

$ npm install --save-dev html-webpack-plugin html-loader
./src/index.html
$ npm run build

명령어를 실행하면 ./dist/index.html파일이 생성된 것을 확인 할 수 있다.

5. css플러그인을 설치하고 css파일을 생성한다.

$ npm install --save-dev mini-css-extract-plugin css-loader

./src/main.css

body {  line-height: 2;}
webpack.config.js

이렇게 jsx, html, css파일에 대한 모든 webpack설정이 끝났다.

마지막으로 개발과정에서 수시로 수정되는 코드를 실시간으로 반영하여 확인 할 수 있는 webpack-dev-server를 설치하여 지금까지 작성한 코드가 실행된 모습을 확인해보도록 하겠다.

  1. webpack-dev-server를 설치하고
$ npm install --save-dev webpack-dev-server

2. package.json파일에 npm 스크립트 코드로 webpack-dev-server를 실행한다.

"scripts": {...,
"start": "webpack-dev-server --mode development --open"
}

이제 모든 과정이 끝났다.

$ npm run start

를 실행하면

성공적으로 webpack-dev-server에 띄워진 리액트 개발환경을 확인 할 수 있다!

Github Source Code

woohyun