create-react-app 快速构建 react 项目、antd 按需加载引入和本地请求数据

# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app
#  敲黑板的重点，如果要用到less,或者要看用到webpack配置文件，就要暴露webpack配置文件，使用 create-react-app 创建的项目，默认情况下是看不到 webpack 相关的配置文件，我们需要给它暴露出来，使用下面命令即可：必须在这之前就处理
npm run eject

create-react-app创建react项目使用less的修改过程。

第一步：暴露配置文件

npm run eject

第二步：修改config/webpack.config.js

//找到如下代码

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

修改为如下代码

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

…

找到这段代码

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true

修改为如下代码

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
    importLoaders: 2,    修改的地方
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
    'less-loader'       修改的地方
),

sideEffects: true,

这是引入antd的按需加载

npm install babel-plugin-import --save-dev

需要在webpack.dev.js配置，在module模块 ,loader: require.resolve(‘babel-loader’)对象中的plugins数组中添加如下代码

[
  "import",
  {libraryName: "antd", style: 'css'} // 移动端添加 "libraryName": "antd-mobile"
] //antd按需加载

重点，就是在plugins数组中再加上这些代码
重点，就是在plugins数组中再加上这些代码
重点，就是在plugins数组中再加上这些代码
重点，就是在plugins数组中再加上这些代码
重点，就是在plugins数组中再加上这些代码

最后就是antd中英文问题，用到了LocaleProvider组建包裹

import { Pagination, Button, LocaleProvider } from "antd";
import zhCN from "antd/es/locale-provider/zh_CN";
 <LocaleProvider locale={zhCN}>
            <Pagination
              showQuickJumper
              defaultCurrent={1}
              total={25}
              onChange={this.onChange}
            />
          </LocaleProvider>
         

启动编译当前的React项目，并自动打开 http://localhost:3000/
npm start

用 create-react-app 脚手架搭建的 react 项目使用 npm run build 之后生成的打包文件只能在根目录访问，这样放在服务器目录就访问不到了，为了你们不要和我一样打包后在哭着百度解决方案，在这里一并放出：

config 文件夹下面找到 paths.js 文件，打开后大约在 34~39 行前后有如下代码：

function getServedPath(appPackageJson) {

const publicUrl = getPublicUrl(appPackageJson);

const servedUrl =envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');

return ensureSlash(servedUrl, true);

}

将这句修改为：(仔细看，最后面的"/“前面加了一个”.")