本文主要介绍了详解webpack+babel+react开发环境的搭建的方法步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
1.认识webpack
构建应用前我们先来了解一下webpack, webpack是一个模块打包工具，能够把各种文件（例如：reactjs、babel、coffeescript、less/sass等）作为模块进行编译后进行打包。
2.安装webpack
要开始使用webpack在项目中进行开发前我们首先需要在全局环境中进行安装。
npm install webpack -g
3.创建一个项目
安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹，当然项目名字你可以起你自己想要的名字。
mkdir learn-webpack && cd learn-webpack
通过编辑器找到你刚刚所创建的项目文件夹
现在我们来创建2个文件:
app.js
document.queryselector('#app').innerhtml = 'hello world!';
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>learn-webpack</title>
</head>
<body>
<p id="app"></p>
<script src="dist/bundle.js"></script>
</body>
</html>
然后在终端执行
webpack ./app.js ./dist/bundle.js
最后执行启动本地的http服务
python -m simplehttpserver
这个时候你就可以在浏览器输入:http://localhost:8000
如果你能在浏览器里面看到hello world!那说明你已经成功的利用webpack把main.js打包并编译到了bundle.js.是不是很简单？
定义一个配置文件
上面的只是对webpack的使用进行了一些简单的介绍，实际上每个项目下都应该包含一个webpack.config.js，用来告诉webpack需要做些什么。
module.exports = {
entry: "app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
}
}
现在在终端中运行：webpack
看看是不是和之前输入 webpack ./app.js ./dist/bundle.js 的打包编译结果一样。
entry：指定打包的入口文件
1.单个文件打包为单个输出文件，直接写该文件的名字，例如：entry:"main.js"
2.多个文件打包为单个输出文件，将文件名放进一个数组，例如：entry:['main.js','xx.js']
3.多个文件打包为多个输出文件，将文件名放入一个键字对，例如：entry: {a:'main.js',b:'xx.js'}
output：配置打包结果
path为定义输出文件夹，filename为打包结果文件的名称，如果指定打包入口文件为上面的1、2种情况，filename里面直接跟你想输出的文件名。若为第3种情况filename里面需写成[name].文件名.js，filename里面的[name]为entry中的键。
监听变化自动打包
当我们在不停的对代码进行变动的时候，为了不修改一次然后又手动去进行打包一次。可以使用webpack的watch功能。
webpack --watch 或者 webpack -w
或者可以直接在配置代码里面把watch设置为true
module.exports = {
entry: "app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
watch: true
}
4.使用babel
babel是什么？babel 是一个 javascript 编译器。使用它可以将es6的语法转换为es5的语法，以便在现在有的环境执行。
在终端执行:npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev
执行安装完成后需要将之前的webpack.config.js修改为:
module.exports = {
entry: "./app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['','.coffee','.js']
}
}
现在就能在文件里面以es6的语法进行代码编写，我们来测试一下，在app.js加入:
var func = str => {
console.log(str);
};
func('我现在在使用babel!');
es6支持用箭头方式来定义函数，如果你能在控制台看到“我现在在使用babel!”的打印文字，说明我们的babel模块安装成功，可以开始使用es6进行代码编写了。
loaders项里面表示用来加载这种类型的资源的loader。
test，是一段正则，表示进行匹配的资源类型。
exclude为指定应该被忽略的文件，我们在这儿指定了/node_modules/。
query有2种写法, 一种是直接以字符串形式跟在loader名后：
loader: 'babel-loader?presets[]=es2015
另一种如本文所示：
query: {
presets: ['es2015']
}
resolve.extensions 用于指明程序自动补全识别哪些后缀,
注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.
5.结合react
前面我们已经对webpack和babel进行了配置并做了一些介绍，基本的环境已经搭建好了，现在我们开始在使用react。
终端输入以下代码对react和react-dom进行安装
npm install react react-dom --save
babel针对react的所有的预设插件
npm install babel-preset-react --save-dev
由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。
将module -> loaders下面的query修改如下：
query: {
presets: ['es2015','react']
}
现在创建一个名为hello.js的文件
import react from "react";
class hello extends react.component{
render() {
return (
<p>
hello, world!
</p>
)
}
}
export default hello;
然后将app.js里面的文件修改如下：
import react from "react";
import reactdom from "react-dom";
import hello from "./hello";
// var func = str => {
// console.log(str);
// };
//
// func('我现在在使用babel!');
// document.queryselector('#app').innerhtml = 'hello world!';
reactdom.render(
<hello />,
document.queryselector('#app')
);
如果你能在浏览器里面看到 hello, react!，就说明我们已经将webpack+babel+react的环境搭建好了，接下来我们就可以此基础上来进行开发了。
相关推荐：
react native 搭建开发环境详解
如何使用docker部署php开发环境
详解php多人开发环境原理
以上就是webpack、babel、react开发环境的搭建教程的详细内容。