序言：通过这个小例子你也许、大概、可能会掌握以下几点
1、webstorm如何使用命令行
2、如何使用webpack的loaders把json格式的文件转化为javascript文件
3、如何使用不同的loaders把es6转换为浏览器可以识别的javascript文件
4、对于react而言如何使用合适的loaders把react的JSX文件转换为javascript文件
5、webpack的服务器启动后如何自动监听改动的文件以及浏览器如何自动刷新。
准备：安装好webstorm和nodejs
开始：
1、新建一个project文件夹为项目根目录，下面2个子文件夹分别是src和public，public目录下一个index.html。如下图
(注：html内引入的bundle.js是webpack最终编译后自动生成的文件，暂时不必理会)
2、在src下面建立一个message.json文件，输入以下内容
{
"name":"Life",
"do":"is a",
"what":"gradient"
}
该文件是给webpack编译并有react渲染到html内的具体内容。
3、在src下面建立一个createdom.js输入以下代码，是基于react创建DOM并获取message.json内的信息javascript文件
/**
* Created by Administrator on 2016/11/11.
*/
//6--------es6写法，最后由webpack来编译--------------
import React,{Component} from ‘react‘;//引入react和组件
import config from ‘./message.json‘;//引入message.json
class Greeter extends Component{
render(){
return(
<h1>
<span>{config.name}</span>
<span>{config.will}</span>
<span>{config.what}</span>
</h1>
);
}
}
export default Greeter//导出组件Greeter
4、在src下面床架一个entry.js输入以下代码(也是webpack的入口文件！！)
/**
* Created by Administrator on 2016/11/11.
*/
//6、编译es6由webpack最后的配置来编译
import React from ‘react‘;//引入react
import {render} from ‘react-dom‘;//引入react-dom的render方法
import Greeter from ‘./createdom‘;//从createdom.js引入Greeter组件
import ‘./main.css‘;//导入css文件，最后由css-loader来处理该模块
render(<Greeter />,document.getElementById(‘app‘));//把Greeter组件挂载到id为app的div内
5、创建package.json文件，并安装所有需要的依赖包(npm太慢，这里使用cnpm)，在webstorm内使用命令行
a:点击webstorm左下角的 Terminal 按钮弹出内置命令行，进入project根目录，如下图
b:输入命令 cnpm init ,快速建立一个package.json文件(如果你的所有依赖包安装成功该文件内都会提示)
等待package.json文件自动生成后再往下继续。
c:输入命令：cnpm install --save-dev webpack，安装webpack依赖包，
此时project目录下回自动生成一个node_modules文件夹，该文件有点大，webstorm会自动加载耗费时间，建议：右击node_modules文件夹》Mark Directory As》Excluded
6、在project根目录创建一个webpack.config.js文件输入以下代码，这也是weback默认的配置文件(属于重要角色)
/**
* Created by Administrator on 2016/11/10.
*/
var webpack = require(‘webpack‘);
module.exports = {
//2、进出口文件配置
entry:__dirname+‘/app/main.js‘,//指定的入口文件,“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
output: {//输出
path: __dirname+‘/public‘,//输出路径
filename: ‘bundle.js‘//输出文件名
},
module: {//在配置文件里添加JSON loader
loaders: [
{
test: /\.json$/,
loader: "json"
},
{//6、编译es6配置
test:/\.js$/,
exclude:/node_modules/,
loader:‘babel‘,//在webpack的module部分的loaders里进行配置即可
query:{
presets:[‘es2015‘,‘react‘]
}
},
{//3、CSS-loader
test:/\.css$/,
loader:‘style!css‘//添加对样式表的处理
}
]
},
//4、服务器依赖包配置
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
该配置中用到了几个loader，Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。
继续webstorm的命令行分别安装：cnpm install --save-dev css-loader、style-loader、json-loader、babel-core、babel-loader、babel-preset-es2015、babel-preset-react、webpack-dev-server依赖包，并cnpm install --save react和react-dom
a:cnpm install --save-dev css-loader
b:cnpm install --save-dev style-loader
c:cnpm install --save-dev json-loader
d:cnpm install --save-dev babel-core
e:cnpm install --save-dev babel-loader
f:cnpm install --save-dev babel--preset-es2015
g:cnpm install --save-dev babel-preset-react
h:cnpm install --save-dev webpack-dev-server
i:cnpm install --save- react
j:cnpm install --save- react-dom
上面都安装成功后你的package.json里会多出如下内容
