게으른 개발자

이전 포스팅에 react와 typescript, webpack4를 활용한 tsconfig 및 webpack을 설정하였습니다. 이제 빌드환경은 구축했으니, 실제 환경별로 script를 실행하는 부분 설정과, 간단한 페이지를 만들어 보도록 하겠습니다. :)

package.json 설정

webpack에 대한 설정을 마쳤고, webpack을 프로젝트 root단에서 설정하였습니다. 저는 환경을 개발환경을 위한 development와 배포 환경을 위한 production으로 나누고자 합니다.

{
	"scripts": {
		"dev": "webpack-dev-server --config ./tools/development.js",
		"prod": "webpack --config ./tools/production.js"
	}
}

development 모드에는 webpack-dev-server를 통해서 서버 구성을 하고, 파일 변경에 따른 브라우저 자동 리로드를 할 수 있도록 hot module replacement옵션을 가질 수 있도록 했습니다. production 모드는 webpack 커맨드를 이용해서 빌드합니다. 만약 dev 모드에서도 watch 옵션만을 키고 싶으신 분들이라면, webpack-dev-server를 webpack으로 변경해 주셔도 무관합니다.

그러나, 해당 파일을 빌드시에 dist내에 파일이 삭제되거나 추가되는 경우 해당 폴더를 초기화 하지 않기 때문에 해당 커맨드를 실행할때마다 덮어쓸 파일은 dist 폴더를 삭제하지 않는한 유지되거나, 덮어씌어지게 됩니다. 만약 각 커맨드를 실행할때마다 dist 폴더를 삭제하고 재 빌드하고 싶으시면, rimraf 플러그인을 사용합니다.

rimraf 설치

npm을 이용하여 global로 설치합니다. (프로젝트에는 설치할 수 없습니다. - 해당 폴더를 삭제하는 권한이 있어야 하므로, 해당 플러그인은 sudo 권한을 가진 전역적인 플러그인으로 설치되어야 합니다.)

sudo npm i -g rimraf

dist 폴더를 삭제하는 커맨드는 각 모드에서 사용하기 위해서, package.json에 다음 커맨드를 추가합니다.

{
	"scripts": {
		"clean": "rimraf dist",
		"dev": "yarn clean && webpack-dev-server --config ./tools/development.js",
		"prod": "yarn clean && webpack --config ./tools/production.js"
	}
}

dist 폴더를 삭제하기 위해 clean 이라는 커맨드를 추가했으며, 각 모드 실행 전에 yarn clean (npm을 사용하시는 경우 npm run clean으로 설정하시면 됩니다.) 후 각 커맨드를 실행할 수 있도록 합니다.

페이지 데모 만들기

이제 빌드 환경은 완성하였습니다. 간단한 페이지를 띄워보도록 하겠습니다.

1) index.html 만들기

src내에 index.html을 만들고, 이를 자동으로 dist 폴더에 빌드시 생성할 수 있도록 만들 예정입니다. 이를 위해서 webpack내 base.js에 관련 플러그인을 설치하고자 합니다.

html-webpack-plugin을 설치합니다.

npm i html-webpack-plugin --save-dev

base.js의 plugins 내에 해당 파일을 설정할 수 있도록 합니다.

// 코드 상단
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
.
.
.
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			filename: './index.html',
		}),
	]
}

src내에 index.html 파일을 생성합니다.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React webpack4 example</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <!-- <link rel="stylesheet" href="./styles/reset.css" /> -->
  </head>
  <body>
    <!-- react root -->
    <div id="root"></div>
  </body>
</html>

id가 root인 div의 경우 react app 을 렌더링할 영역입니다.

App.tsx 생성하기

이제 App.tsx를 생성할 차례입니다. src 폴더 내에 App.tsx를 생성합니다.

'use strict'

import * as React from 'react'
import * as ReactDOM from 'react-dom'

ReactDOM.render(
	<div>
		Hello world!
	</div>,
	document.getElementById('root'
)

간단한 Helloworld만 찍어볼 용도로 App.tsx를 설정합니다.

script 실행

개발 모드에서 해당 페이지를 로드합니다.

npm run dev

localhost:9000에 접속하시면, 간단하게 만든 App.tsx 내용이 출력됩니다.

현재까지 webpack4에 대한 설정 및 App.tsx와 index.html을 만들어 webpack-dev-server를 통해 페이지를 띄워보는 연습까지 했습니다. 3번째 포스팅에서는 react-router-dom 을 통한 SPA 기반의 라우팅 설정을 진행하겠습니다.

감사합니다 :D

react + typescript + webpack4 - 2. package.json 설정 및 데모

February 07, 2019