笔者刚开始接触到webpack的时候是因为这个时候react已经满天飞了，想开始react的开发，虽然很多前端Er都说react上手不难，可是这一套工具链把很多小白都拒之门外，webpack+es6+react这套简单的工作流我也是找了很久，煞费苦心，刚开始有点上手webpack1的时候webpack2出现了，然后我又看了很久文档，现在出一个简易版的Webpack2 + es6 + react的配置工作流给大家，让大家速度开始写上react!
首先如果大家npm安装package太慢的话可以先安装淘宝的cnpm工具
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装全局的webpack工具
cnpm install -g webpack webpack-dev-server
webpack-dev-server是一个小型的node服务器，下面开始初始化我们的项目
mkdir app && cd app/ && npm init
初始化项目后安装css-loader 以及webpack
cnpm install webpack css-loader --save-dev
安装一下babel的一些工具，目的不用多说，我们的es6、jsx的代码都要靠它来打包
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
当然还有react和react-dom
cnpm install react react-dom --save-dev
这个时候发现package.json的文件中devDependencies出现了下面的信息
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.3",
"style-loader": "^0.18.1",
"webpack": "^2.6.1"
},
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
把这些依赖安装结束后我们要开始写我们的webpack.config.js文件了，这个文件是我们在终端输入了webpack后读取的第一个文件，因为笔者也是一个webpack2小白，做了一些比较简单的配置，让大家先用上react,所以大神就可以忽略以该文章了
var path = require('path');
module.exports = {
entry: './app/main.jsx',
output: {
path: path.resolve(__dirname, './app/build'), // 输出文件的保存路径
filename: 'bundle.js' // 输出文件的名称
},
module: {
loaders: [{
test: /\.jsx?$/,
loaders: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
]
}
};
写的比较简单，包括一个入口文件，一个输出文件的地址，我们的入口文件在app文件下的main.jsx,输出文件在app/build下面的 bundle.js文件，下面我们来新建这些文件吧，目录给大家：
图片比较失真，大概图你要有一个app文件夹，app/build用来存放打包好的文件，一个index.html，一个main.jsx
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack2</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="./build/bundle.js"></script>
</html>
main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
render(){
return(
<h1>Hello Webpack Hello React</h1>
)
}
}
ReactDOM.render(
<App></App>,
document.getElementById('app')
)
好了，在你的文件的根目录输入
webpack
然后用你最喜欢的浏览器（我喜欢chrome）打开index.html吧！
now enjoy react!
please email huang93223@126.com
