[webpack] 配置react+es6开发环境

写在前面

每次开新项目都要重新安装需要的包，简单记录一下。

以下仅包含最简单的功能：

• 编译react
• 编译es6
• 打包src中入口文件index.js至dist

webpack配置react+es6开发环境

1、安装react语法环境

npm install react react-dom --save


2、安装webpack开发环境

npm install webpack --save-dev


3、安装babel

npm install babel-loader babel-core --save-dev


4、安装react转换规则

npm install babel-preset-react --save-dev


5、安装es6转换规则

npm install babel-preset-es2015 --save-dev


6、安装es7转换规则

ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个

npm install babel-preset-stage-0 --save-dev


npm install babel-preset-stage-1 --save-dev


npm install babel-preset-stage-2 --save-dev


npm install babel-preset-stage-3 --save-dev


7、配置.babelrc文件

{
presets:{
"react",
"es2015",
"stage-0"
},
plugins:[]
}


8、创建webpack.config.js

var webpack = require("webpack");
var path = require("path");var root = path.join(__dirname, "./");
var src = path.join(root, "./src");
var dist = path.join(root, "./dist");module.exports = {
entry: {
"index": [path.join(__dirname, "./src/index.js")]
},
output: {
path: dist,
filename: "/static/[name].js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: "babel"
}
]
},
resolve: {
extensions: ['', '.js']
}
};

小结

以上只是最简单的功能，记下来也只是备忘，并不能提高效率。之后会把以上功能写成脚本，用于自动初始化不同类型的项目，主治懒癌晚期