最近react刷屏的厲害，而隨着它一起走進我們視野的還有webpack，webpack只是個工具，為什么如此火呢？因為簡單好了不廢話。
直接進入正題：
打開命令行工具：
npm install -g webpack npm install -g webpack-dev-server mkdir webpack-react-es6 cd webpack-react-es6 npm init # 一直點回車 如果懶得填一些信息
打開package.json 復制以下代碼：
{
"name": "react-es6-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.10.0",
"react": "^0.14.7",
"react-hot-loader": "^1.3.0",
"react-transform-hmr": "^1.0.4",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
創建webpack.config.js，復制以下代碼：
var path = require('path'); var webpack = require('webpack'); var ROOT_PATH = path.resolve(__dirname); var APP_PATH = path.resolve(ROOT_PATH, 'app'); var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); // var htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: [ 'webpack/hot/only-dev-server', "./app/index.js" ], output: { path: BUILD_PATH, filename: "bundle.js" }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", query: { presets:['react','es2015'] } }, { test: /\.scss$/, loaders: ['style', 'css', 'sass'], include: APP_PATH }, { test: /\.(png|jpg)$/, loader: 'url?limit=40000' } ] }, resolve:{ extensions:['','.js','.json'] }, devServer: { hot: true, inline: true }, plugins: [ new webpack.NoErrorsPlugin(), new webpack.HotModuleReplacementPlugin() ] };
根目錄下創建index.html，為了調試用：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>New React App</title> </head> <body> <div id="content"></div> <script src="bundle.js"></script> </body> </html>
根目錄下創建app文件夾，新建index.js
import React from 'react'; import ReactDOM from 'react-dom'; let App = React.createClass({ render() { return(<h1>Hello, world!</h1>); } }); ReactDOM.render(<App/>, document.getElementById('content'));
最后在根目錄下敲命令npm install,安心等待就ok，不過有很大的可能部分模塊安裝失敗，比如node-sass，比較頑固，需要反復安裝多次。
如果實在安裝不成功，就直接下載http://pan.baidu.com/s/1bnYgWgv。