创建你的项目

先全局安装好 create-react-app

1
npx create-react-app my-app
扩展

通过 yarn 或者 npm 来安装 customize-cra、react-app-rewired 来支持扩展，其中 customize-cra 包含一些插件：fixBabelImports、 override、 addLessLoader、 addDecoratorsLegacy、 addWebpackAlias、 overrideDevServer 等方法，react-app-rewired 替换 react-scripts。

那么怎么进行 webpack 配置？

1、创建 config-overrides.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

module.exports = {

  webpack: override(

    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true,
    }),
  
    // less
    addLessLoader({
      javascriptEnabled: true,
    }),

    // 装饰器
    addDecoratorsLegacy(),
  
    // 别名
    addWebpackAlias({
      '@components': path.resolve('src/components'),
      '@pages': path.resolve('src/pages'),
      '@stories': path.resolve('src/stories'),
      '@utils': path.resolve('src/utils'),
    }),
  ),
  
}

2、代理配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

module.exports = {

  webpack: override(
    //  代理
    devServer: overrideDevServer(
      (config) => {
        return {
          ...config,
          proxy: [
            {
              path: '/xxx/**',
              target: 'http://127.0.0.1:3000',
              changeOrigin: true,
            }
        ]
      }
    }
  )
}

3、执行脚本配置
修改 package.json

1
2
3
4
5
6

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

4、demo地址
demo