从0开始react项目配置

快速创建react项目

利用react脚手架创建项目是非常快速简便的方法

安装npm,yarn

如何安装的npm,yarn 并进行修改安装路径参照： https://blog.csdn.net/qq_42625428/article/details/106764379

 

全局安装脚手架

npm install create-react-app -g
yarn global add create-react-app

 

新建项目

create-react-app myapp

 

更改项目配置

利用react脚手架搭建的项目的webpack的配置文件都被隐藏了，需要暴露配置文件在进行配置

相对于旧的版本，新版本4.1及以后的webapck 已经将webpack.config.dev.js和webpack.config.prod.js合并成webpack.config.js。

暴露配置文件

npm run ejexct / yarn eject

如果暴露，提交你修改后未提交的文件 ，在执行

提交 

git add .

git commit -m 'init'

重新执行

npm run eject / yarn eject

 

执行完毕后发现，会多出文件，并且package文件也会被修改

 

配置less的使用

找到配置文件

 

修改配置文件 - 前提是已经下载好了less,less-loader哈   - yarn add  less less-loader

   

 将sass的配置copy一下，修改一下插件名称

 

配置完成之后就可以去看看你的less文件是否能正常运行了

 

配置antd的按需引入

antd的全局引入，直接全局引入css文件就可以了:https://ant.design/docs/react/use-with-create-react-app-cn

@import '~antd/dist/antd.css';

 

antd的按需引入，需要对配置文件进行修改

下载插件 babel-plugin-import

npm install babel-plugin-import
yarn add babel-plugin-import

在配置文件中进行新增-如图

新增代码

                 [
                     require.resolve('babel-plugin-import'), //导入 import插件
                      {
                         libraryName:'antd', //暴露antd
                         style:'css'
                       } 
                  ]

重新启动项目 

注意 - 修改配置文件后，都需要重新启动项目