基于webpack搭建一个React项目

最近接到需求使用React来搭建一个较为复杂的页面，所以先基于webpack来搭建了一个简易的初始结构。项目地址：https://github.com/Kasol/React4Webpack.git

可以clone下来直接npm start运行。由于想从目录结构开始入手，所以没有使用React的脚手架来搭建。下面记录下探索过程的一些小坑。

1. babel-loader
   webpack的关键配置就是loader，由于babel内置对JSX的支持，所以安装babel-loader即可，但是在安装过程中，出现了一些babel版本的兼容问题。babel-loader装的是8.x，但是babel装的是6.x,并且babel在7.0之后，发布的模块目录结构和原先有所不同，原先是babel-*这样，之后收拢到@babel这个命名空间下，所以babel-loader是去引用@babel下的模块，我没有装就报错了。于是乎升级了babel到了7.0。正确安装相应模块后即可生效。

2. .babelrc
   主要是presets的设置，babel升级后，相应预设的写法也要改变

    "presets": ["@babel/preset-react", "@babel/preset-env"],

3. scss-loader
   由于想书写模块化的css，这里我选择了scss，所以配置loader的时候，要注意scss-loader的版本

4. webpack的配置文件
   针对开发 和 线上写了俩个配置，然后利用webpack-merge这个模块来合并配置，本地会利用webpack-dev-server来启动静态资源服务，可以实时查看运行效果