react+webpack简单小例子

这段时间由于项目需求，需要做一个以react为基础的web项目，由于之前又只有一部分的react-native和web开发经验，对于这个react本以为就是引入js就完事了，哪晓得完全不是这么回事。

为什么要用webpack？

首先一脸蒙蔽的就是，啥是webpack？为啥非要用这玩意？经过万能的百度最后得出了一点个人的粗见：
1.webpack就是一个打包的地方库，需要创建一个webpack.config.js来配置，打包的入口等等一系列配置。
2.react是使用es6语法来写，游览器并不认得这语言，我们需要使用webpack将其转换成游览器能识别的语言。

项目例子

主要参考的就是这个文章从零开始，教你用Webpack构建React基础工程，
这篇文章还是相当不错的，严格按照上面说的做是可以把项目搭建出来，但是这其中还是有个坑。

var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src'); //__dirname 中的src目录，以此类推
var APP_FILE = path.resolve(APP_PATH, 'index'); //根目录文件app.jsx地址
var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); //发布文件所存放的目录

module.exports = {
    devtool: 'eval-source-map',//生成Source Maps,这里选择eval-source-map
    entry: APP_FILE,//唯一入口文件
    output: {//输出目录
        path: BUILD_PATH,//打包后的js文件存放的地方
        filename: "bundle.js"//打包后输出的js的文件名
    },

    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
                exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
    }
}

上面是我的webpack.config.js文件，多了那个resolve，这个作用是自动补全，可以帮你把省略的文件后缀补上，我当时死活报出找不到引用的文件，最后发现是引入的时候少了后缀，真tm坑死了。