Where is webpack.config.js when create-react-app has few built-in directories? How do I configure the plug-in? How to modify loader?

If I go to package.json, I’ll find scripts

  "scripts": {
    "start": "react-scripts start"// Start a microservice"build": "react-scripts build"// Build the project"test": "react-scripts test"/ / test"eject": "react-scripts eject"// Release configuration},Copy the code

NPM run start === NPM start– Start a micro service, and a http://localhost:3000 page appears in the browser. NPM run build is a new folder in the directory called build, which is loaded with the webpack package. NPM run test. This command can only be executed once. When eject succeeds, there are only three commands in scripts in package.json, and the eject command disappears

  "scripts": {
    "start": "node scripts/start.js"."build": "node scripts/build.js"."test": "node scripts/test.js"
  },
Copy the code

In addition, the dependencies in the original dependencies also have the original

  "dependencies": {
    "@testing-library/jest-dom": "^ 4.2.4"."@testing-library/react": "^ 9.5.0"."@testing-library/user-event": "^ 7.2.1"."react": "^ 16.13.1"."react-dom": "^ 16.13.1"."react-scripts": "3.4.1 track."
  },
Copy the code

Turned out to be

  "dependencies": {
    "@babel/core": "7.8.4"."@svgr/webpack": 4.3.3 ""."@testing-library/jest-dom": "^ 4.2.4"."@testing-library/react": "^ 9.5.0"."@testing-library/user-event": "^ 7.2.1"."@typescript-eslint/eslint-plugin": "^ 2.10.0"."@typescript-eslint/parser": "^ 2.10.0"."antd": "^ 4.0.3"."babel-eslint": "10.0.3"."babel-jest": "^ 24.9.0"."babel-loader": "8.0.6"."babel-plugin-named-asset-import": "^ 0.3.6"."babel-preset-react-app": "^ 9.1.1." "."camelcase": "^ 5.3.1"."case-sensitive-paths-webpack-plugin": "2.3.0"."css-loader": "3.4.2."."dotenv": "8.2.0"."dotenv-expand": "5.1.0"."eslint": "^ 6.6.0"."eslint-config-react-app": "^ 5.2.0." "."eslint-loader": "3.0.3"."eslint-plugin-flowtype": "4.6.0"."eslint-plugin-import": "2.20.0"."eslint-plugin-jsx-a11y": 6.2.3 ""."eslint-plugin-react": "7.18.0"."eslint-plugin-react-hooks": "^ 1.6.1." "."file-loader": "4.3.0"."fs-extra": "^ 8.1.0"."html-webpack-plugin": "11 4.0.0 - beta."."identity-obj-proxy": "3.0.0"."immutable": "^ 4.0.0 - rc. 12"."install": "^ 0.13.0"."jest": "24.9.0"."jest-environment-jsdom-fourteen": "1.0.1"."jest-resolve": "24.9.0"."jest-watch-typeahead": "0.4.2"."less": "^ 3.11.1." "."less-loader": "^ 5.0.0"."mini-css-extract-plugin": "0.9.0"."optimize-css-assets-webpack-plugin": "5.0.3"."pnp-webpack-plugin": "1.6.0"."postcss-flexbugs-fixes": "4.1.0."."postcss-loader": "3.0.0"."postcss-normalize": "8.0.1"."postcss-preset-env": "6.7.0"."postcss-safe-parser": "4.0.1"."react": "^ 16.13.0"."react-app-polyfill": "^ 1.0.6"."react-dev-utils": "^ 10.2.0"."react-dom": "^ 16.13.0"."react-redux": "^ 7.2.0"."react-router": "^ 5.1.2." "."react-router-config": "^ 5.1.1." "."react-router-dom": "^ 5.1.2." "."redux": "^ 4.0.5"."redux-immutable": "^ 4.0.0"."redux-thunk": "^ 2.3.0." "."resolve": "1.15.0"."resolve-url-loader": 3.1.1 ""."sass-loader": "8.0.2"."semver": "6.3.0"."style-loader": "0.23.1"."styled-components": "^ 5.0.1." "."swiper": "^ 5.3.6." "."terser-webpack-plugin": "2.3.4"."ts-pnp": "1.1.5."."url-loader": "2.3.0"."webpack": "4.41.5"."webpack-dev-server": "3.10.2"."webpack-manifest-plugin": "2.2.0"."workbox-webpack-plugin": "This"
  },
Copy the code

At the same time, there is a folder config in the directory, which contains all the basic configuration information, wrapped in the webpack.config.js file.


How do you configure on-demand loading for less and Ant?Copy the code
1. The configuration is lessCopy the code

NPM insatll less less-loader -d will become CSS after compiling, so use -d development environment can be. 2. Go to config/webpack.config.js to find the configuration file of sass, and add our configuration file after sass

const sassRegex = /\.(scss|sass)$/; / / the original file const sassModuleRegex = / \. The module \. (SCSS | sass) $/; Const lessRegex = /\.less$/; // Add file const LessLessmoduleregex = /\.module\.less$/; // Add a fileCopy the code

3. Locate the configuration rule of SASS under Models Rules

2. Antd loads the configuration on demandCopy the code

2.1 Install babel-plugin-import: NPM install babel-plugin-import -d 2.2 Configure the following information in webpack.config.js: Find the configuration information about Babel in the Module and append the information about babel-plugin-import

Conclusion: After implementing create-react-app, we should observe the project. Please believe that all existing things are necessary, and do not ignore its existence easily. Always keep a mind of exploration, programming, front-end have great help. ‘!