Webpack 4와 babel 7으로 react개발환경 셋업하기
이번 포스팅에서는 webpack 4와 babel 7을 이용하여 react 개발환경을 처음부터 구축해보려고 한다.
- 먼저 개발환경을 만들 새로운 디렉토리를 생성한다.
$ mkdir react-setting && cd $_2. npm모듈을 사용하기 위해 package.json을 초기화한다.
$ npm init -y명령어를 입력하면
다음과 같이 package.json에 설정된 내용이 표시된다.
3. npm을 이용해 webpack 4를 설치한다.
$ npm install --save-dev webpack webpack-cli
5. src 디렉토리를 생성하고 하위에 webpack으로 번들링 할 index.js파일을 생성하여 webpack을 실행한다.
webpack 4는 entrypoint와 output을 별도로 설정하지 않아도
entry point는 ./src/index.js 파일로,
output은 ./dist/main.js로 인지하고 번들링해준다.
$ webpackwebpack을 실행하면 번들링 된 ./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을 설치하고 적용할 차례이다.
- webpack을 설치했을 때와 마찬가지로 npm모듈을 이용해 babel을 설치한다.
npm install --save-dev @babel/core babel-loader @babel/preset-env
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 개발 환경을 구축해볼 것이다.
- 먼저 react모듈을 설치한다.
$ npm install --save-dev react react-dom @babel/preset-react2. .babelrc파일과 webpack.config.js파일을 수정한다.
3. App.js파일을 생성하고 index.js에서 import한다.
// ./src/index.jsimport App from “./App”;
4. html 플러그인을 설치하고 html파일을 생성한다.
$ npm install --save-dev html-webpack-plugin html-loader
$ 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;}
이렇게 jsx, html, css파일에 대한 모든 webpack설정이 끝났다.
마지막으로 개발과정에서 수시로 수정되는 코드를 실시간으로 반영하여 확인 할 수 있는 webpack-dev-server를 설치하여 지금까지 작성한 코드가 실행된 모습을 확인해보도록 하겠다.
- webpack-dev-server를 설치하고
$ npm install --save-dev webpack-dev-server2. package.json파일에 npm 스크립트 코드로 webpack-dev-server를 실행한다.
"scripts": {...,
"start": "webpack-dev-server --mode development --open"
}
이제 모든 과정이 끝났다.
$ npm run start를 실행하면
성공적으로 webpack-dev-server에 띄워진 리액트 개발환경을 확인 할 수 있다!