安装webpack
先新建文件夹并进入
mkdir demo
cd demo
项目初始化
npm init -y
补充：此处加-y是因为一路回车比较麻烦，可以生成默认的package.json文件
安装
cnpm install --save-dev webpack
配置webpack.config.js
在项目根目录建立webpack.config.js文件，这个文件是进行webpack配置的，先建立基本的入口和出口文件。
var path =require('path');
module.exports = {
//入口文件
entry:'./app/index.js',
//出口文件
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
}
}
新建index.html文件
在根目录新建index.html文件，并引入webpack设置中的出口文件，代码如下。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React</title>
</head>
<body>
</body>
<!--引入出口文件-->
<script src="./dist/index.js"></script>
</html>
测试webpack配置
/app/index.js文件
function component(){
var element = document.createElement('div');
element.innerHTML = ('Hello JSPang');
return element;
}
document.body.appendChild(component());
package.json文件加入打包命令
"scripts": {
"build": "webpack"
},
打包：
npm run build
开发服务器配置
安装：
cnpm install --save-dev webpack-dev-server
配置webpack.config.js文件：
devServer:{
contentBase:'./',
host:'localhost',
compress:true,
port:8080
}
packeage.json：
"scripts": {
"build": "webpack",
"server": "webpack-dev-server --open"
},
启动服务：
npm run server
自动刷新浏览器
在我们修改代码时，现在并不能自动刷新浏览器，不会立即呈现我们编写的代码结果，而时要再次npm run build才可以。其实只要在出口文件配置中加一个publicPath:’temp/’,然后在index.html引入JS时写这个temp地址就可以实时预览了。
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist'),
publicPath:'temp/'
},
index.html文件引入JS：
<script src="./temp/index.js"></script>
Babel安装配置
在webpack中配置Babel需要先加入babel-loader，这里我们继续使用npm来进行安装，但是我们一般还需要支持es2015和React，所以要安装四个包。安装后你会在package.json里看到这些包的版本。
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
配置module
在安装完成后，可以到webpack.config.js里配置module，也就是配置我们常说的loader。
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loaders:"babel-loader",
query:{
presets:['es2015','react']
}
}
]
}
编写React
安装React和React-dom
cnpm install --save react react-dom
安装完成后，我们改写app/index.js文件，把原来原生的JavaScript代码改成React代码。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello majing</div>,
document.getElementById("app")
);
index.html
<div id="app"></div>
配置完就可以npm run server预览了
