react 프로젝트 구축 및 웹pack 설정

1556 단어
1, 웹 팩 구성
npm install-g 웹팩 웹팩의cli 환경
npm install-g webpack-dev-server webpack 자체 서버
2, 각종 의존 라이브러리
babel 관련 라이브러리
npm install babel-core -D 백그라운드 컴파일 babel 도구 -D는 --save-dev의 줄임말이다
npm intall babel-preset-es2015-D babel 대 es2015의 사전 설정
npm install babel-loader -D babel 캐리어
웹 팩 자체
npm install webpack -D webpack 로컬 의존 라이브러리
npm install webpack-dev-server-D webpack 서버의 로컬 의존
npm install babel-preset-react-D bel-react 사전 설정
npm install react - D react 라이브러리 자체
npm install react-dom - D react-dom 자체
npm install react-hot-loader -D 핫 업데이트
npm install style-loader  -D  
npm install css-loader -D
3.webpack 관련 설정 webpack.config.js
modules.exports={
entry:'./index.js',
output:{
path:__dirname,
filename:'bundle.js'
},
devtool:"source-map", // 
module:{
loaders:[
{test:/\.css$/,loader:'style!css'},
{test:/\.js$/,loader:'react-hot!babel',exclude:/node_modules/},
]
}
}

react 프로젝트 구축
설치 node 설치 여부 판단 node-v
느린 네트워크 속도로 타오바오 미러 설치 가능
프로젝트 초기화
npm install -g create-react-app
create-react-app react-demo
cd react-demo
npm start

좋은 웹페이지 즐겨찾기