create-react-app 를 사용하지 않고 webpack v4로 번들링하기

리액트 웹앱 제작 총론 이란 책을 따라 학습을 하던중 마지막에 webpack 으로 번들링 하는 과정에서 문제가 생겼다. 최근에 나온 책이지만 책속 예제를 따라하다보면 webpack v4가 설치되서 진행이안된다. (예제는 webpack v2를 사용함) 물론 create-react-app 도구를 사용하면 편하기는 하겠지만, 편함에 익숙해져서야 되겠는가? 적어도 어떻게 흘러가는지는 알아야겠다 싶어서 아무 도구 없이 npm만 설치한 상태에서 진행해보았다. 전체소스는 여기에 올려두었음.

프로젝트 초기화

 > npm init
 > npm install --save react react-dom createReactClass @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server

babel-loader 버전이 8.x 로 변경되면서 babel-core 나 babel-preset 들도 죄다 패키지명이 변경됐다. webpack 관련 글들을 검색해보면 죄다 @접두사가 없이 설명된 글들이 많은데 죄다 안돌아가니까 머리 아파하지 말것. 관련글은 babel-loader 홈페이지를 참고하면된다. ~~역시 참조는 공홈~~

의존 패키지를 설치한 후 package.json을 열어 다음을 추가한다.

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

최종 package.json은 다음과 같다.

 {
 "name": "react_webpack4_no_cli",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
     "start": "webpack-dev-server --mode development --open",
     "build": "webpack --mode production"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "@babel/core": "^7.0.1",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.2",
     "create-react-class": "^15.6.3",
     "webpack": "^4.19.0",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.5"
 }

index.html 파일 추가
프로젝트 폴더 루트에 생성한다. 별내용없다. 간단함.

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>React</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
     <div id="app"></div>
     <script src="/build/app.js"></script>
 </body>
 </html>

JSX 파일 추가
프로젝트 루트디렉토리에 src 디렉토리를 생성하고 index.jsx 파일을 생성한다.

 import React from 'react';
 import ReactDOM from 'react-dom';
 import createReactClass from 'create-react-class';

 var HelloWorld = createReactClass({
 render() {
     return (
         <div>
             <h1>Hello, {this.props.greetTarget}!</h1>
         </div>
     )
 }
 });

 ReactDOM.render(
     <div>
         <HelloWorld greetTarget="codechaser" />
     </div>,
     document.getElementById("app")
 );

책하고 좀 내용이 다른게 createReactClass라는 놈이다. react가 버전업 되면서 React.createClass() 가 별도 모듈로 빠져바렸다. 관련내용은 역시 공홈 참조!

그냥 속편하게 ES6을 공부해서 class 문법으로 하는게 좋을것같다. 그럼 다음처럼 하면됨.

 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';

 class HelloWorld extends Component {
     render() {
         return (
             <div>
                 <h1>Hello, {this.props.greetTarget}!</h1>
             </div>
         )
     }
 }

 ReactDOM.render(
     <div>
         <HelloWorld greetTarget="codechaser" />
     </div>,
     document.getElementById("app")
 );

물론 의존 모듈 설치할때 createReactClass는 빼도 된다.

webpack 설정
프로젝트 루트디렉토리에 webpack.config.js 파일을 생성한다.

 var webpack = require("webpack");
 var path = require("path");

 var SRC_PATH = path.resolve(__dirname, "src");
 var BUILD_PATH = path.resolve(__dirname, "build");

 var config = {
     entry: SRC_PATH + "/index.jsx",
     output: {
         path: BUILD_PATH,
         filename: "app.js"
     },
     module: {
         rules: [{
             test: /\.jsx$/,
             use: {
                 loader: 'babel-loader'
             }
         }]
     }
 };

 module.exports = config;

책하고 다른부분은 module 선언 부분이다. webpack이 v4로 변경되면서 저부분이 많이 바뀌었음.

babel 설정
프로젝트 루트 디렉토리에 .babelrc 파일을 생성한다.
```
 {
     "presets": [
         "@babel/env", "@babel/preset-react"
     ]
 }
```

빌드
프로젝트 루트 디렉토리에 build 디렉토리를 만들고 다음을 실행한다.

 > npm run start

실행후 웹브라우저가 뜨면서 react 앱이 실행될것이다. 이틀간 삽질한거 여기서 마무리하긴 아쉬우니까, hot reload 를 적용해보자. 그러기 위해서는 html-webpack-plugin 모듈이 필요하다.

 > npm install --save html-webpack-plugin

그런다음 webpack.config.js 파일을 수정하자 다음을 추가한다.

 var webpack = require("webpack");
 var path = require("path");

 var SRC_PATH = path.resolve(__dirname, "src");
 var BUILD_PATH = path.resolve(__dirname, "build");

 var HtmlWebpackPlugin = require('html-webpack-plugin');

     module.exports = {
     entry: './src/index.js',
         output: {
         path: path.join(__dirname, '/dist'),
         filename: 'index_bundle.js'
     },
     var config = {
     entry: SRC_PATH + "/index.jsx",
     output: {
         path: BUILD_PATH,
         filename: "app.js"
     },
     module: {
         rules: [{
             test: /\.jsx$/,
             use: {
                 loader: 'babel-loader'
             }
         }]
     },
     plugins : [
         new HtmlWebpackPlugin({
             template: './src/index.html'
         })
     ]
 };

HtmlWebpackPlugin 모듈은 template 으로 지정된 파일에 자동으로 빌드된 script 파일을 추가해준다. 따라서 index.html 에 있던 <script src="/build/app.js"></script> 부분도 필요없다.

index.html 파일의 최종코드는 다음과같다.

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>React</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
     <div id="app"></div>
 </body>
 </html>

webpack-dev-server hot 옵션을 적용하기 위해 package.json 의 script 부분을 수정하자.

package.json 파일의 최종코드는 다음과 같다.

 {
 "name": "react_webpack4_no_cli",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
     "start": "webpack-dev-server --mode development --open --hot",
     "build": "webpack --mode production"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "@babel/core": "^7.0.1",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.2",
     "create-react-class": "^15.6.3",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.19.0",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.5"
   }
 }

다시 npm start를 해서 웹브라우저에 react앱이 올라온 것을 확인하고, index.jsx 파일의 greetTarget을 변경해보자.

파일을 저장하자말자 브라우저에 변경사항이 적용되는것이 보일것이다.

저작자표시 비영리 변경금지

'개발개발' 카테고리의 다른 글

Webpack dev server, Spring 개발 환경 구축 (0)	2018.11.07
클라우드 Mongodb 사용해보기 (1)	2018.09.21
Gitlab과 Redmine 한서버에 설치하기 (0)	2018.08.24
Centos 에서 GitLab 설치하기 (0)	2018.08.21
CentOS에 NginX 설치하기 (0)	2018.08.20

코드박스

create-react-app 사용하지 않고 webpack v4로 번들링하기

create-react-app 를 사용하지 않고 webpack v4로 번들링하기

'개발개발' 카테고리의 다른 글

티스토리툴바

create-react-app 사용하지 않고 webpack v4로 번들링하기

create-react-app 를 사용하지 않고 webpack v4로 번들링하기

'개발개발' 카테고리의 다른 글

'개발개발' Related Articles

티스토리툴바