React+webpack+vscode

第一步，进入项目根目录下执行 npm init ：生成 package.json 文件

第二步：npm install webpack --save-dev 给本项目安装 webpack

第三部: npm install --save react react-dom babelify babel-preset-react

很优秀的一篇文章：

http://www.jianshu.com/p/42e11515c10f

webpack.config.js 配置文件收藏使用

var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
module.exports = {
    devtool: 'source-map',//配置生成Source Maps，选择合适的选项
    entry: __dirname + "/app/main.js",//唯一入口文件，就像Java中的main方法
    output: {//输出目录
        path: __dirname + "/build",//打包后的js文件存放的地方
        filename: "bundle.js"//打包后的js文件名
    },
    module: {//在配置文件里添加JSON loader
        loaders: [
        {
            test: /\.json$/,
            loader: "json-loader"
        },
         {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可

        },
        {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules!postcss-loader'
      },
      { 
      test: /\.(png|jpg)$/, 
      loader: 'url-loader?limit=25000' 
    }
        ]
    },

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: function () {
        return [ autoprefixer];
      },
      devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        colors: true, //终端中输出结果为彩色
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
      }
    }
  }),
    new webpack.BannerPlugin("Copyright Flying Unicorns inc."),//在这个数组中new一个就可以了
    new webpack.HotModuleReplacementPlugin()//热加载插件

],

    devServer: {
        port:"8080",
        devtool:'evel',
        progress:true,
        contentBase: "./build",//本地服务器所加载的页面所在的目录
        colors: true,//终端中输出结果为彩色
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    } 

};
​

.babelrc

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",

         "imports": ["react"],

         "locals": ["module"]
       }]
     }]]
    }
  }
}
​