2017最新webpack3.0+react+es6开发环境搭建一
1.开发前请先安装npm，直接下载nodejs安装好即可
2.创建我们的工程目录：
3.进入工程所在目录：cd react -dev-env-blog
执行：npm init -y生成项目配置的package.json文件，配置如下：
{
"name": "react-dev-env-blog",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
4.安装webpack ,react，react-dom,babel-loader,babel-core,babel-preset-es2015,babel-preset-react,react-hot-loader等工具。
4.1 安装webpack
npm install --save-dev webpack
babel-loader,babel-core,babel-preset-es2015,babel-preset-react
4.2 安装babel相关工具
npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react
4.3安装react
npm install --save-dev react react-dom
4.4安装完成后的package.json，在script标签中加入打包工具webpack，"build": "webpack",
{
"name": "react-dev-env-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --inline"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-hot-loader": "^1.3.1"
},
"devDependencies": {
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
}
}
5.创建./components/hello/hello.js组件:
6.创建打包的入口文件，./components/index.js：
7.创建./dist/index.html页面入口文件：
8.创建./webpack.config.js:
9.编译项目:npm run build,编译成功后直接在浏览器中打开./dest/index.html即可看到效果
10.为了开发方便，不用每次build，刷新网页，接下来我们配置webpack和react的热更新，有人会问webpack不就有热更新么，还要react-hot-loader干什么，其实webpack的热更新是静态的，在浏览器中想要保存react的state跟踪，就必须要使用react-hot-loader来解决：
10.1 安装webpack-dev-server :
npm install webpack-dev-server --save-dev
10.2安装react-hot-loader
npm install react-hot-loader --save-dev
11.配置webpack-config.js如下：
12.配置package.json添加webpack server的启动入口:
13.至此react+webpack热加载就添加完了，npm run start 就可以查看成果了：页面也可以自动刷新了，这里说明一点很多人不知道npm --save和npm --save-dev的区别，save是上线环境，save-dev是开发环境。
以上是 2017最新webpack3.0+react+es6开发环境搭建一 的全部内容， 来源链接： utcz.com/z/381119.html
