[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']
    }
};

小结

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