react+webpack+babel+webpcak-dev-server+react-router-dom从无到有

react-demo

两个目标:

  • 手动搭建react脚手架:react、bable、webpack、react-router-dom、webpack-dev-server
  • 理解webpack从无到有打包原理

手动搭建react脚手架项目地址

有坑的地方会特别说明,因为好多文章都没有给出babel和webpack-dev-server的版本,所以在搭建过程中遇到比较多的问题。

1.react react react-dom
2.babel babel-loader babel-core babel-presets-es2015|stage-0|react

babel 这里的坑:注意babel的版本号,比如运行时报错babel/core找不到等等,需要降低babel的版本,

注意webpack.config.js配置文件中的loader书写,需要从webpack官网找,有的博客写的不对会造成错误

注意需要有一个.babelrc的文件

3.webpack
4.webpack-dev-server

使用webpack-dev-server –hot –inline –config webpack.config.js 运行报错,注意降低webpack-dev-server的版本号

5.react-router-dom
    原文作者:缓缓先生
    原文地址: https://segmentfault.com/a/1190000016273706
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞