lead

Create-react-app creates a React project. Then introduce antD. Antd official website process requires self-written configuration file. Integrate with Webpack. There’s nothing wrong with that, of course. But if you also want to take a look at the code behind it. Then read on!

Business with each other

The front end is evolving fast. In order not to make your colleagues in reading this article is confused. Here is a list of the environment and library versions used in this project

  1. The node (v12.16.2)
  2. NPM (v6.14.4)
  3. React (v16.13.1)
  4. Antd (v4.1.4)
  5. Less (v3.11.1)
  6. Less – loader (v5.0.0)
  7. Babel – plugin – import (v1.13.0)
  8. Webpack (v4.42.0)

If any problem occurs during the configuration, refer to the corresponding version to find the solution.

Yarn is recommended.

Install dependencies

Install antd

# npm 
npm install antd --save

# yarn
yarn add antd
Copy the code

Installation is less, less – loader

Since ANTD is a style component developed by less, we also need to introduce less and less-loader

# npm
npm install less less-loader --save

# yarn
yarn add less less-loader
Copy the code

Install Babel – plugin – import

To load the component library on demand, we also need a plug-in, babel-plugin-import

Note the differences in the figure when changing configuration items

When creating a React project using create-react-app. We don’t see webPack configuration items in the project directory. Create-react-app also gives us a way to see it.

Exposing profiles

We need to run a command from the project terminal:

# npm
npm run eject

# yarn
yarn eject
Copy the code

At this point, we can see that there are two additional folders config and scripts in the project. When I open package.json, I find that it is also very different. However, our focus is on webpack.config.js in the config file

Changing configuration Items

// webpack.config.js.// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// Add here: Add less configuration
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
// End of adding.Copy the code

The order of importing rules to file-loader cannot be changed. When multiple Loaders are configured, the loaders are executed from right to left and from bottom to top

. {test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3.sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'sass-loader'),},// Add here: Add less
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3.sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true}, {test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3.sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'),},// Add end!

{
  loader: require.resolve('file-loader'),
  // Exclude `js` files to keep "css" loader working as it injects
  // its runtime that would otherwise be processed through "file" loader.
  // Also exclude `html` and `json` extensions so they get processed
  // by webpacks internal loaders.
  exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
  options: {
    name: 'static/media/[name].[hash:8].[ext]',}},// ** STOP ** Are you adding a new loader?.Copy the code

According to the need to load

. plugins: [ [require.resolve('babel-plugin-named-asset-import'),
    {
      loaderMap: {
        svg: {
          ReactComponent:
            '@svgr/webpack? -svgo,+titleProp,+ref! [path]',},},},],// Add here: import ANTD on demand
  [
    require.resolve('babel-plugin-import'),
    {
      libraryName: 'antd'."libraryDirectory": "es".style: true}]// End of adding],...Copy the code

Custom themes

. if (preProcessor) { loaders.push( {loader: require.resolve('resolve-url-loader'),
      options: {
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
    },
    {
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: true,}}); }// Add: custom theme
if (preProcessor && preProcessor === 'less-loader') {
  loaders.push(
    {
      loader: require.resolve('resolve-url-loader'),
      options: {
        sourceMap: isEnvProduction && shouldUseSourceMap
      }
    },
    {
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: true.javascriptEnabled: true.modifyVars: {
          'primary-color': '#ff4757'.'link-color': '#ff4757'.'border-radius-base': '2px',}}}); }// End of adding
returnloaders; .Copy the code

Antd style variable

After that, we don’t need to introduce ANTD CSS files anywhere!

Configuration complete, run project!