webpack 打包一个简单react组件
安装Webpack，并加载一个简单的React组件
全局的npm模块安装：
npm install -g webpack
安装jsx-loader
npm install --save-dev jsx-loader
默认使用当前目录的自己新创建的webpack.config.js作为配置文件
module.exports = { entry: [ './assets/js/entry.js' ], output: { path: __dirname + '/assets/', publicPath: "/assets/", filename: 'bundle.js' }, module: { loaders: [ { test: /\.jsx?$/, loaders: ['jsx-loader?harmony'] } ] } };
定义了一个简单的React组件hello.js，使用ES6语法
var React = require('react'); class Hello extends React.Component { render() { return ( <h1>Hello {this.props.name}!</h1> ); } } module.exports = Hello;
创建entry.js入口文件，将一个Hello组件输出到界面：
var React = require('react'); var Hello = require('./Hello'); React.render(<Hello name="Nate" />, document.body);
创建根目录index.html文件
<html> <head> </head> <body> <script src="/assets/bundle.js"></script> </body> </html>
项目文件夹结构：
+ assets/ - js/ Hello.js entry.js index.html webpack.config.js
在当前目录执行webpack命令之后，在assets目录将生成bundle.js，打包了entry.js的内容
webpack
通过npm安装Webpack开发服务器并启动它：
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
好现在可以通过http://localhost:8080/webpack-dev-server/index.html打开页面，如下：
快速浏览更多在线 Demo
想查看源代码，可以自行F12，或在github中直接查看源码，或者欢迎直接留言。
