위의 사이트를 참고로 구성해 봤습니다.
폴더를 만들고, 해당 폴더 안에서 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.