用webpack搭建react开发环境

安装插件:

npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015

　　

配置webpack.config.js:

法1、单独配置babelrc文件

module.exports = {
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
    module: {
        loaders: [
            {
				test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
            }
        ]
    },
}

　　

新建无文件名文件：babelrc
备注：如何新建无文件名文件方法：（新建deal.bat,记事本写入 @ren "%~f1" .* ，保存后，把任意文件拖到deal.bat上可以去掉文件名而只保留后缀。）

{
  "presets": [
    "react",
    "es2015"
  ]
}

　　

法2、

module.exports = {
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
    module: {
        loaders: [
            {
				test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
					presets: ['react','es2015']//将react编译成js文件、顺序无所谓
                } 
            }
        ]
    },
}

　　

如果你没有使用es6写的react，可以去掉es2015;

 

最后，cmd控制台，输入webpack命令即可生成。