最近接到需求使用React来搭建一个较为复杂的页面，所以先基于webpack来搭建了一个简易的初始结构。项目地址：https://github.com/Kasol/React4Webpack.git
可以clone下来直接npm start运行。由于想从目录结构开始入手，所以没有使用React的脚手架来搭建。下面记录下探索过程的一些小坑。
-
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。正确安装相应模块后即可生效。 -
.babelrc
主要是presets的设置，babel升级后，相应预设的写法也要改变
"presets": ["@babel/preset-react", "@babel/preset-env"],
-
scss-loader
由于想书写模块化的css，这里我选择了scss，所以配置loader的时候，要注意scss-loader的版本 -
webpack的配置文件
针对开发 和 线上写了俩个配置，然后利用webpack-merge这个模块来合并配置，本地会利用webpack-dev-server来启动静态资源服务，可以实时查看运行效果