react學習1（搭建腳手架，配置less，按需引入antd等）

腳手架搭建項目后是個純項目，什么鬼都沒有

create-react-app 腳手架搭建好之后，開始配置，

yarn add react-router-dom axios less less-loader  （多個的話就空格）

antd是基於less開發的所以項目中使用less
react-router-dom 是路由4.x的可以直接安react-routert推薦安react-router-dom 這樣路由就可以和dom(html等)一起使用

1.（如less sass）
2。安裝ui antd
2.封裝請求

要暴露出webpack等配置文件，不然咋個改less-loader這些嘛
執行命令：yarn eject

根目錄多個config文件夾，里面有webpack

 

新增2行 

const lessRegex = /\.less$/;

const lessModuleRegex = /\.module\.less$/;

下面的找到對應的地方新增

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2
              }, 'less-loader'),
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

 

 

按需引入

按需加載antd的實現方式：
用create-react-app創建項目后，如果需要第三方的插件庫，需要配置webpack配置文件，步驟如下：

1. 首先運行npm run eject暴露出webpack的配置文件，項目對多出config和scripts文件夾
2. 安裝完antd和babel-plugin-import后，修改根目錄下的package.json babel處，在persets后面添加

　　　　

"plugins":[["import",{"libraryName": "antd", "style": "css"}]]

 

搞定，不用antd推薦的那個yarn add react -app-rewired customize-cra 這2個插件，因為它沒更新，react腳手架創建的項目的啟動項如圖，

 

antd 官網如圖

里面的 啟動命令都不一樣了，所以antd官網沒更新嘛，所以就用上面的方法就可以按需引入了