Method of configuring Webpack in Create-react-app Scaffold

Overview

The react-scripts in the Create-react-app Scaffold can (1) help us to download the required Webpack dependencies automatically, (2) write a Nodejs server script code, (3) Use Express HTTP servers, (4) and help us the configuration file is hidden .

So what if we need additional configuration Webpack? such as the addition of MD loader.

I have summed up 2 ways for future development, and I believe it will be useful for others.

Method One

Run the following command to display the configuration file:

npm run eject//然后输入Y

After entering the project directory will be more than a Congfig folder, there is a webpack configuration file.

However, this process is irreversible, so it can no longer be hidden back when it appears.

Method Two

( to modify the Babel plug-in implementation on-demand loading antd as an example, modify the other configuration can be modeled this way.) )

(1) using react-app-rewired (a community solution for customizing the Create-react-app) and Babel-plugin-import (a Babel management-loaded plugin).

$ yarn add react-app-rewired --dev$ yarn add babel-plugin-import --dev//或者使用npmnpm install react-app-rewired --devnpm install babel-plugin-import --dev

(2) Modify the boot configuration in the Package.json.

/* package.json */"scripts": {    "start": "react-app-rewired start",    "build": "react-app-rewired build",    "test": "react-app-rewired test --env=jsdom",}

(3) Create a config-overrides.js in the project root directory to modify the default configuration.

/* config-overrides.js */const { injectBabelPlugin } = require('react-app-rewired');module.exports = function override(config, env) {    config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);    return config;  };

Method of configuring Webpack in Create-react-app Scaffold