写在前面

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

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

• 编译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']

    }

};

小结

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