This is the sixth day of my participation in Gwen Challenge

One, foreword

For projects built through CRA scaffolding, the general WebPack configuration is hidden and will have to be handled separately if it needs to be modified.

There are usually two ways to modify webPack

  • Add or override webPack configuration via plug-ins (Method 1, Method 2)
  • Or release the WebPack configuration in the project, make it visible, and then modify it (Method 3)

Originally, CRA scaffolding encapsulated webPack and other complex configurations in the project. Later, we could update react-Scripts to experience the new features brought by the version upgrade. However, sometimes we really needed to modify the WebPack configuration to meet the needs of the project, so we generally chose to override the WebPack configuration through plug-ins. Of course, you can let go of the configuration completely.

The following common ways are:

Second, the use ofreact-app-rewiredModifying or overwriting the configuration (recommended)

1. Download plug-ins and dependencies

yarn add react-app-rewired customize-cra babel-plugin-import -D
Copy the code

2, modify,package.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}
Copy the code

3. Create a new file in the project root directoryconfig-overrides.js

const { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
    fixBabelImports("import", {
        libraryName: 'antd',
        libraryDirectory: "es",
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true
    })
);
Copy the code

The react-app-rewired configuration is not quite the same as the react-app-rewired configuration

App. CSS and index.css are changed to app. less and index.less

It is then introduced into the project and found that the project is working

3. Use plug-ins@craco/cracoModify or overwrite the configuration

1. Install plug-ins and dependencies

yarn add @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D
Copy the code

2. Create a directory in the root directorycraco.config.js

const CracoLessPlugin = require("craco-less")
const path = require('path')
const pathResolve = pathUrl => path.join(__dirname, pathUrl)

module.exports = {
  webpack: {
    alias: {
      '@': pathResolve('src')
    }
  },
  babel: {
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true
          }
        }
      }
    }
  ]
}
Copy the code

Here configure the imported alias ‘@’, which is used specifically

Create the pages/index.js directory under SRC

export const DATA = "test"
Copy the code

Also shown here is the @babel/plugin-proposal-decorators method for introducing plug-ins

Craco/Craco reference documentation

Compile WebPack completely into your project

Release the WebPack configuration

You can see this script in package.json when you download the project

{
  "scripts": {
    "eject": "react-scripts eject"
  }
}
Copy the code

Execute YARN eject to compile the encapsulated Webpack configuration into the project so that you can get all of the Webpack configuration and modify it yourself.

cd fronted-demo
yarn eject
Copy the code

You can see that there are a lot of new files in the Fronted-Demo project directory. These files are webpack configuration files. You can change any configuration, but the project file suddenly increases, and the process is not reversible.

The main configuration is in the config file

This is the same as webPack’s original configuration,

2, configuration,less-loader

In this section, less-loader is imported

Add the configuration under module/rules under config/webpack.config.js, and then add the common.less file to the project

.color-red {
    color: red
}
Copy the code

In the index.tsx file

import "./common.less"
<div className="color-red">test</div>
Copy the code

Found after run

3, pay attention to

  • 1.less-loaderVersion cannot exceed6.0.0If you write more than this, you will get an error because of the higher versionless-loaderThe syntax has changed and a new format needs to be written.

TypeError: this.getOptions is not a function

  • 2. Note the configuration of these two linesless-loaderTo write infile-loaderEffective before