## 一，全局安裝 webpack
01.//創建項目文件初始化項目配置文件
~~~
mkdir webpack-react-es6
cd webpack-react-es6
npm init //自定義創建package.json文件
~~~
02.//全局安裝webpack，服務自動刷新預覽功能
~~~
npm install webpack -g
n npm install webpack-dev-server --save-dev
~~~
03.//安裝React,--save 命令用于將包添加至 package.json 文件,執行命令:
`npm install react react-dom --save-dev `
04.安裝babel插件,babel插件是webpack需要的加載器,如果沒有這幾個加載器我們的jsx語法，和es2015語法就會報錯。
~~~
npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev
~~~
## 二，修改webpack.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'));
~~~
