当前webpack版本：2.2；react: 15.4.2
webpack从1.x升级到2.x替换了几个接口，包括module.loaders这样的重要接口已被弃用（详细变更）。官网目前已不推荐使用1.x版本，早上折腾一番，根据2.2版本配置了react基本的开发环境，满足不太复杂的web应用开发，后期会逐步优化配置文件。
如果您之前使用过webpack，需要改动的地方并不大。下文假定您没有接触过类似的打包工具（但了解npm、jsx再好不过），以跟我一样一个新手的身份认识这些，如有不妥之处望不吝赐教。
如果您的react项目是引入的以下三个js文件在浏览器端编译jsx，那么不需要用webpack做开发环境。
1 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> 2 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> 3 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
但是在产品上线阶段，我们很不推荐这样做。1，用户需要下载这三个文件，浪费了带宽；2，下载完成后需要在浏览器端编译jsx文件，浪费了时间和资源。
如果将开发阶段的项目代码打包编译为一个js文件，再推上线，那么：1，将HTTP请求减少为1个；2，不需要用户端再浪费时间和资源去编译，直接运行上线前已编译好的js代码。
如果是前者，引入项目js代码的script标签type值为"text/babel"；如果是后者，type值为"text/javascript"。
如何做？
一，安装nodejs，使用它附带的npm包管理工具。为什么要用npm？后期会下载react依赖、babel依赖、webpack工具，使用npm方便很多。不使用npm也可以，但无疑会增加诸多困难。
二，新建一个项目文件夹，在文件夹内打开终端，即Windows下的命令行（Shift+鼠标右键），运行 npm init ，如果没有特殊要求，可一直按回车键到最后一步。
三，在终端内执行如下命令下载需要的所有依赖和工具， --save-dev 详见SegmentFault解释
npm install react react-dom babel-loader babel-core babel-preset-es2015 webpack webpack-dev-server --save-dev
四，配置webpack配置文件。在根目录下，即与package.json同级下新建webpack.config.js文件，在文件内部写入如下内容
// webpack.config.js var webpack = require("webpack"); var path = require("path"); module.exports = { entry: './dev/entry.jsx', // 入口文件
devtool: 'source-map', // 调试时定位到编译前的代码位置，推荐安装react插件 output: { path: path.resolve(__dirname, "./dist/js/"), filename: 'bundle.js' // 打包输出的文件 }, module: { rules: [{ test: /\.jsx?$/, // test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译 exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }] }, resolve: { // 现在你import文件的时候可以直接使用import Func from './file'，不用再使用import Func from './file.js' extensions: ['.js', '.jsx', '.json', '.coffee'] } };
目录结构：
app |__dev | |__components | |__entry.jsx |__dist | |__css | |__js | |__bundle.js | |__index.html |__node_modules |__package.json |__webpack.config.js
