标签：
1,目录
首先建立package.json文件
{ "name": "react-webpack", "version": "1.0.0", "description": "webpack demo", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot --progress --colors", "build": "webpack --progress --colors" }, "repository": { "type": "git", "url": ".." }, "keywords": [ "react", "webpack" ], "author": "txiao", "devDependencies": { "babel-core": "^5.8.25", "babel-loader": "^5.3.2", "css-loader": "^0.12.1", "react": "^0.13.3", "react-hot-loader": "^1.3.0", "react-router": "^0.13.3", "webpack": "^1.12.2", "webpack-dev-server": "^1.11.0" }, "dependencies": { "lodash": "~3.10.1", "react-kendo": "~0.13.11" } }
创建打包配置文件
var webpack = require(‘webpack‘); module.exports = { entry: [ ‘webpack/hot/only-dev-server‘, "./js/app.js" ], output: { path: ‘./build‘, filename: "bundle.js" }, module: { loaders: [ { test: /\.js?$/, loaders: [‘react-hot‘, ‘babel‘], exclude: /node_modules/ }, { test: /\.js$/, exclude: /node_modules/, loader: ‘babel-loader‘}, { test: /\.css$/, loader: "style!css" } ] }, resolve:{ extensions:[‘‘,‘.js‘,‘.json‘] }, plugins: [ new webpack.NoErrorsPlugin(), new webpack.HotModuleReplacementPlugin() ] };
建立入口文件app.js
import React from ‘react‘; import MyHello from "./hello"; import MyWorld from "./world"; import MyImg from "./image"; React.render( <div> <MyImg/> <MyHello value="hello"/> <MyWorld value="world"/> </div>, document.getElementById(‘content‘) );
建立hello组件
import React from ‘react‘; var hello= React.createClass({ render:function(){ return (<div className= "hello" >{this.props.value}</div>); } }); export default hello;
建立world组件
import React from ‘react‘; var world= React.createClass({ render:function(){ return (<div className="world" > {this.props.value}!</div>); } }); export default world;
建立图片测试组件
import React from ‘react‘; var img = React.createClass({ render:function(){ return(<img src="./img/part1.png" />) } }); export default img;
建立index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyReact</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="content"></div>
<script src="./build/bundle.js"></script>
</body>
</html>
进入项目根目录执行插件包的安装 npm install
执行打包webpack
执行测试服务 npm start
访问 http://localhost:8080/webpack-dev-server/
react + webpack +es6 hello world
标签：
原文地址：http://www.cnblogs.com/txiao/p/5265724.html
