最近接到需求使用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来启动静态资源服务,可以实时查看运行效果