引言
目前React前端框架是今年最火的。而基於React的React Native也迅速發展。React有其獨特的組件化功能與JSX的新語法，幫助前端設計有了更好的設計與便捷，而React Native更是擴大了前端的邊界。
說道React，那就不得不說一下Webpack憑借它異步加載和可分離打包等優秀的特性，走在取代Grunt和Gulp的路上。而面向未來的ES6，更是支持模塊化處理。
下面我就分享一下關於Webpack+React+ES6的環境搭建（通用）【附加發布版】
准備工作
首先需要准備的就是WebStorm以及安裝node.js，這里我給出自己雲盤上的下載地址，親測可用。對應的地址如下：
WebStorm：鏈接：http://pan.baidu.com/s/1o787Av4 密碼：z176
node.js：鏈接：https://nodejs.org/en/ 官網
讓我們跑起來
1、新建項目EChartDemo（我這里后續會使用一些相關的百度繪畫組件，故以此命名，但這里只做框架構建，暫不引入百度繪畫組件），更改文件-->設置 ES6環境，如圖所示：
2、添加package.json文件，輸入npm init文件自動生成文件，如下：
{ "name": "react-echart", "version": "1.0.0", "scripts": { "start": "node server.js" }, "description": "React+EChart百度繪圖組件Demo", "main": "index.js", "repository": { "type": "git", "url": "git+https://github.com/JaminHuang/EChartDemo.git" }, "author": "JaminHuang", "license": "ISC", "bugs": { "url": "https://github.com/JaminHuang/EChartDemo/issues" }, "homepage": "https://github.com/JaminHuang/EChartDemo#readme" }
3、生成文件后，添加server.js（服務入口文件）、webpack.config.js（配置文件）、webpack.production.config.js（發布版配置文件），再進行修改對應的Scripts，用於修改啟動和發布。
"scripts": { "start": "node server.js", "prod": "webpack --config webpack.production.config.js" }
4、新建入口文件index.html，以及相關代碼框架，如下所示
|--src |----containers |------index.js 組件處理主文件 |------root.js 地址跳轉配置文件 |----service |------index.js 服務請求主文件 |------request.js 服務請求文件 |----index.js 主入口文件 |--index.html 頁面入口文件 |--package.json 項目信息與安裝配置文件 |--server.js 服務端口入口文件 |--webpack.config.js 配置文件 |--webpack.production.config.js （發布版）配置文件
5、需要安裝的包，詳情請看package.json，如下：
"dependencies": { "echarts": "^3.2.3", "isomorphic-fetch": "^2.2.1", "lodash": "^4.15.0", "react": "^15.3.1", "react-dom": "^15.3.1", "react-router": "^2.8.0" }, "devDependencies": { "babel-core": "^6.14.0", "babel-loader": "^6.2.5", "babel-polyfill": "^6.13.0", "babel-preset-latest": "^6.14.0", "babel-preset-react": "^6.11.1", "open": "0.0.5", "react-hot-loader": "^1.3.0", "webpack": "^1.13.2", "webpack-dev-server": "^1.15.1" }
6、新建.babelrc(babel配置文件)，重要
{ "presets":["react","latest"] }
具體內容的添加配置
1、index.html配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="wrapper"></div>
<script src="./public/bundle.js" type="text/javascript"></script>
</body>
</html>
2、server.js配置
'use strict'; var open = require('open'); var webpack =require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config.js'); var compiler = webpack(config); var server = new WebpackDevServer(compiler, { publicPath:config.output.publicPath, hot:true, historyApiFallback: true, quiet: false, noInfo: false, filename: "index.js", watchOptions: { aggregateTimeout: 300, poll: 1000 }, headers: {"X-Custom-Header": "yes"}, stats: {colors: true} }); server.listen(3010, function (err, result) { if (err)console.log(err); open('http://localhost:3010'); });
3、webpack.config.js配置
'use strict'; var path = require('path'); var webpack = require('webpack'); var config = { devtool: 'source-map', entry: { app: ['webpack-dev-server/client?http://localhost:3010', 'webpack/hot/dev-server', './src/index'] }, output: { path: path.join(__dirname, 'public'), publicPath: '/public/', //chunkFilename: '[id].chunk.js', filename: "bundle.js" }, module: { loaders: [ {test: /\.js$/, loaders: ['react-hot', 'babel'], include: [path.join(__dirname, 'src')]} ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), //new webpack.optimize.CommonsChunkPlugin('shared.js'), new webpack.DefinePlugin({ 'process.env': { 'DEBUG': true } }) ] }; module.exports = config;
4、webpack.production.config.js配置
/** * 創建時間：2016年9月19日 10:45:57 * 創建人：JaminHuang * 描述：配置文件（發布版） */ 'use strict'; var path = require('path'); var webpack = require('webpack'); module.exports = { devtool: false, debug: false, stats: { colors: true, reasons: false }, entry: './src/index', output: { path: path.join(__dirname, 'public'), publicPath: '/public/', //chunkFilename: '[id].chunk.js', filename: 'bundle.js' }, plugins: [ new webpack.optimize.DedupePlugin(), new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production'), 'DEBUG': false } }), //new webpack.optimize.CommonsChunkPlugin('shared.js'), new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.AggressiveMergingPlugin(), new webpack.NoErrorsPlugin() ], module: { loaders: [ {test: /\.js$/, loader: "babel", exclude: /node_modules/} ] } };
5、src文件下的主入口文件配置
'use strict'; import React from 'react'; import ReactDOM from 'react-dom'; import { browserHistory, Router } from 'react-router' import routes from './containers/root'; import 'babel-polyfill'; ReactDOM.render(<Router history={browserHistory} routes={routes}/>, document.getElementById('wrapper'));
6、service文件（請求服務，如果沒有調用其他API接口則不用創建）下的相關配置
6.1 index.js
'use strict'; import * as Request from './request'; export { Request }
6.2 request.js
'use strict'; import fetch from 'isomorphic-fetch'; const baseUrl = "http://xxx"; export function FetchPost(url, data) { return fetch(`${baseUrl}/${url}`, { headers: {"Content-Type": "application/json"}, method: 'POST', body: JSON.stringify(data) }).then(response=> { return response.json(); }) }
7、containers文件（組件包）下的相關配置
7.1 index.js
'use strict'; import React,{ Component } from 'react'; import { Link } from 'react-router'; class Container extends Component { render() { const { children } = this.props; return (<div>{children}這里是首頁</div>) } } export default Container;
7.2 root.js
'use strict'; import Index from './'; export default { component: Index, path: '/' }
后記
至此，所有配置全部都已經完成了，如果想運行查看則只要輸入”npm start“就可以調試查看啦~如果想發布則輸入”npm prod“就行了。
附上Demo源代碼地址：如果感覺可以的話，請給個Star哦~