react v16.7 版本配置 less less-loader antd按需

第一步

create-react-app  myapp  创建同一个react项目
yarn add antd less less-loader babel-plugin-import 需要配置的 less 和 babel依赖

第二步

yarn eject  暴露出 react webpack配置
上面暴露 webpack命令时 请查看下自己当前目录或上层目录是否有为提交的git 

如果有未提交的git是无法执行这个命令的， 解决办法 1，删除git文件 2，提交git

新版的webpack配置 dev.js 和 prod.js都已经集成到了 webpack.config.js 中

配置less less-loader

//在 代码 425 行 添加以下less配置
{
              //less
              test: lessRegex,
              exclude: lessModuleRegex,
              use:getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              //less
              test: lessModuleRegex,
              use:getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

app 就可以直接引入less文件了

配置 antd 按需引入 如上图代码 这时使用的button组件是没有样式的， 但是如过引入整个antd.css 又超级的大 两万多行css不能小看， 那么就需要babel-plugin-import这个依赖了。

// 代码块 358行 plugins 查看中 加入以下代码
[require.resolve('babel-plugin-import'), { libraryName: 'antd', style: 'css' }]

完成了以上步骤后 我们基本已经配置完成了。 但是在start运行之前还要修改一下package.json

//使用node启动
  "scripts": {
    "start": "node  ./scripts/start",
    "build": "node  ./scripts/build",
    "test": "node  ./scripts/test"
  },
 //增加less
 "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|less|sass|scss)$"
    ],
 "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|less|sass|scss)$": "identity-obj-proxy"
  },