webpack 2.x配置reactjs基本开发环境

1 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
2 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
3 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

npm install react react-dom babel-loader babel-core babel-preset-es2015 webpack webpack-dev-server --save-dev

// webpack.config.js
var webpack = require("webpack");
var path = require("path");

module.exports = {
    entry: './dev/entry.jsx', // 入口文件
    devtool: 'source-map',　　// 调试时定位到编译前的代码位置，推荐安装react插件
    output: {
        path: path.resolve(__dirname, "./dist/js/"),
        filename: 'bundle.js' // 打包输出的文件
    },
    module: {
        rules: [{
            test: /\.jsx?$/, // test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    },
    resolve: {
        // 现在你import文件的时候可以直接使用import Func from './file'，不用再使用import Func from './file.js'
        extensions: ['.js', '.jsx', '.json', '.coffee']
    }
};

    app
    |__dev
    |   |__components
    |   |__entry.jsx
    |__dist
    |   |__css
    |   |__js
    |       |__bundle.js
    |   |__index.html
    |__node_modules
    |__package.json
    |__webpack.config.js