自定义create-react-app 配置

由于create-react-app没有提供让自定义webpack配置的接口，去修改它的源码又比较麻烦，因此这里推荐使用react-app-rewired来对create-react-app进行深度配置。

How to rewire your create-react-app project

1. Install react-app-rewired

   $ npm install react-app-rewired --save-dev

2. 在工程根目录下创建config-overrides.js

   /* config-overrides.js */
   
   module.exports = function override(config, env) {
     //do stuff with the webpack config...
     return config;
   }

这时，你的工程目录可能是这样的：

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

1. 修改 package.json的script

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

更多配置详见react-app-rewired。

配置create-react-app支持ES6注解和阿里的antd

/* config-overrides.js */

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(
        "babel-plugin-transform-decorators-legacy",
        injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
            config
        )
    );
    return config;
};

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦