프로그래밍/ReactJS 🤞

ReactJS 를 mac 환경에서 설치해보기

재우니 2017. 7. 30. 14:39


ReactJS 작업환경 설정하기

https://velopert.com/814


webpack2 입문 가이드 및 설치

https://hyunseob.github.io/2017/03/21/webpack2-beginners-guide/

위의 사이트를 참고로 구성해 봤습니다.


폴더를 만들고, 해당 폴더 안에서 webpack 를 설치합니다.

yarn add --dev webpack

CSS 를 bundle 로 처리하기 위해서...

yarn add --dev style-loader css-loader

ie 환경에서도 ES2015 사용하기 위해 babel 설치합니다..

yarn add --dev babel-loader babel-core babel-preset-env

유명한 JavaScript 라이브러리인 Lodash 를 설치해 봅니다.

yarn add lodash



package.json


{
"scripts": {
"dev": "node_modules/.bin/webpack-dev-server --progress",
"build": "node_modules/.bin/webpack --config webpack.config.js -p",
"start": "webpack-dev-server --hot --host 0.0.0.0",
"webpack": "webpack"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"eslint-loader": "^1.9.0",
"style-loader": "^0.18.2",
"webpack": "^3.4.1"
},
"dependencies": {
"lodash": "^4.17.4",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}


webpack.config.js

module.exports = {
entry: './src/index.js',

output: {
path: __dirname + '/public',
filename: 'bundle.js'
},

devServer: {
inline: true,
port: 7777,
contentBase: __dirname + '/public'
},

module: {

rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
}
]
}
};



/public/index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>React Apps</title>
</head>

<body>
<div id="root"></div>

hello world !!

<script src="/bundle.js"></script>
</body>

</html>


/src/text.css

/* text.css */
body {
color: green;
font-size: 20px;
}


/src/common.css

/* common.css */
@import 'text.css';
body {
background-color: gray;
}


/src/index.js

import React from 'react';
import random from 'lodash/random';

import './common.css';


document.write(`Random: ${random(0, 100)}`);


npm run start 를 터미널에 실행하면 아래와 같이 http://0.0.0.0:7777 로 접속이 가능합니다.



sim-ui-MacBook-Air:react-tutorial shimjaewoon$ npm run start


> @ start /Users/shimjaewoon/react-tutorial

> webpack-dev-server --hot --host 0.0.0.0


Project is running at http://0.0.0.0:7777/

webpack output is served from /

Content not from webpack is served from /Users/shimjaewoon/react-tutorial/public

Hash: 2933b7d81e13582d1603

Version: webpack 3.4.1

Time: 2754ms

    Asset    Size  Chunks                    Chunk Names

bundle.js  534 kB       0  [emitted]  [big]  main

  [48] ./node_modules/webpack/hot/log.js 1.04 kB {0} [built]

  [59] multi ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack-dev-server/client?http://0.0.0.0:7777 webpack/hot/dev-server ./src/index.js 52 bytes {0} [built]

  [60] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack-dev-server/client?http://0.0.0.0:7777 5.83 kB {0} [built]

  [61] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack/node_modules/url/url.js 23.3 kB {0} [built]

  [67] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]

  [69] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack-dev-server/node_modules/loglevel/lib/loglevel.js 6.74 kB {0} [built]

 [107] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]

 [109] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack/hot/emitter.js 77 bytes {0} [built]

 [110] ./node_modules/webpack/hot/dev-server.js 1.61 kB {0} [built]

 [111] ./node_modules/webpack/hot/log-apply-result.js 1.31 kB {0} [built]

 [112] ./node_modules/webpack/hot/emitter.js 77 bytes {0} [built]

 [113] ./src/index.js 132 bytes {0} [built]

 [114] ./node_modules/react/react.js 56 bytes {0} [built]

 [132] ./node_modules/lodash/random.js 2.37 kB {0} [built]

 [148] ./src/common.css 1 kB {0} [built]

    + 137 hidden modules

webpack: Compiled successfully.




저작자표시 비영리 동일조건