使用 webpack 搭建 React 开发环境
准备：
先简单了解一下：
- es6：es6 是一种标准，而我们以前用于开发的 js 语法属于 es5 标准，我们想要使用新的标准去开发。
- babel：babel 是一个 JavaScript 编译器,我们会使用 jsx 语法，所以需要 babel 给我编译成 js 语法。另外现代浏览器还没有支持 es6 标准，但是我们要去使用，怎么办，就需要使用 babel 来进行语法转换，将 es6 语法转换为 es5 语法
- React：可以说是现阶段最热门的前段框架，也属于非常新的技术了，我们有必要去学习他
前面的命令基本规范了：
新建一个项目:
cnpm init -y 这里使用-y 可以直接使用默认配置
安装 webpack:
cnpm install webpack
安装 react、babel:
cnpm install --save react react-dom babel-core babel-loader babel-preset-react babel-preset-es2015
命令基本完毕，接下来就是修改一下配置文件了,根目录新建一个 webpack.config.js
搭建并启动一个小项目
简单的规划一下，我们把 es6 的文件单独分离出来到 es6/，便于维护处理，将编译结果的文件放在 build 文件夹下面，方便使用.
入口页面还是放在根目录。基于这样的分配，我们将 webpack.config.js 这样写：
var webpack = require('webpack');
//使用path，方便构建目录
var path = require('path');
module.exports = {
entry: './es6/index.js',
output: {
path: path.join(__dirname,'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: path.join(__dirname, 'es6'),
loader: 'babel-loader',
//识别语法
query:{
presets:['es2015','react']
}
}
]
}
}
新建一个 build 目录
新建一个 es6 目录，在其中新建一个 index.js，写入代码：
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
根目录新建一个 index.html，写入代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example"></div>
<script src="build/bundle.js"></script>
</body>
</html>
命令行运行 webpack，就能直接打开 index.html 查看效果了
资料
基本属于新技术，可看的资料比较有限，推荐几个地方：
React 中文文档
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于