새로 개발할 모니터링 리액트용 환경구성

npm i react react-dom 

 

Npm install --save-dev webapck webpack-dev-server babel-core babel-loader babel-preset-env 

 

Webpack 설치  

Bable env까지 설치 

 

현재까지 Package.json내용 

 

{ 

"name": "webpack-devserver", 

"version": "1.0.0", 

"description": "", 

"main": "index.js", 

"scripts": { 

"build": "webpack --mode development", 

"start": "webpack-dev-server --inline --hot --content-base --mode development", 

"test": "echo \"Error: no test specified\" && exit 1" 

}, 

"author": "", 

"license": "ISC", 

"dependencies": { 

"react": "^16.4.1", 

"react-dom": "^16.4.1" 

}, 

"devDependencies": { 

"babel-core": "^6.26.3", 

"babel-loader": "^7.1.5", 

"babel-preset-env": "^1.7.0", 

"css-loader": "^1.0.0", 

"style-loader": "^0.21.0", 

"webpack": "^4.16.1", 

"webpack-cli": "^3.0.8", 

"webpack-dev-server": "^3.1.4" 

} 

} 

 

 

Webpack.config.js 

const path = require('path') 

const webpack = require('webpack'); 

module.exports = { 

entry:{ 

app : './src/app.js' 

}, 

output:{ 

path:path.resolve(__dirname , 'build') ,  

publicPath : '/build/', 

filename:'app.bundle.js' 

}, 

module :{ 

rules : [ 

{ 

test: /\.js$/, //js로 끝나는 확장자만 로더를 적용할 것 

exclude: /node_modules/, //node_modules 폴더는 제외 

loader: "babel-loader" 

}, 

{ 

test: /\.css$/, 

         use: [ 

            'style-loader', 

           'css-loader' 

         ]  

}, 

// { 

// test: /\.(png|svg|jpe?g|gif)$/, 

     //  loader:'file-loader', 

     //  option: { 

     //      name: '[hash].[ext]' 

     //  } 

// }  

] 

}, 

devServer: { 

host : '127.0.0.1', 

contentBase: path.join(__dirname, "/"), 

compress: true, 

watchContentBase: true, 

hot : true, 

inline: true, 

port: 8080, 

open : true 

}, 

plugins: [ 

new webpack.HotModuleReplacementPlugin() 

] 

} 

 

처음에 핫로드가 적용안되길래 왜 안되나싶었는데 

publicPath를 지정하지않아서 그렇다 

 

배포시 webpack에 플러그인들 (로더들) 안에있는 url업데이트를 해야한다. 

핫로드 될때는 이전 파일과 비교를 하기때문에 webpack에서 내부적으로 더미 파일명을 만들기때문인거같다. (예상임) 

 

 

 

리액트와 바벨 리엑트 프리셋 그리고 익스프레스를 설치한다. 

 

npm i express react react-dom babel-preset-react react-hot-loader 

 

.babelrc 프리셋 변경 

 

{  

"presets": ["env", "react"] 

}