Wuzzle，不 eject 也能定制 create-react-app 创建的 React 应用

作为 React 官方维护的命令行工具，create-react-app（简称 CRA）能够极其轻松地创建配置完备的 React 应用，帮助使用者快速进入 React 开发。它的最大缺憾是创建的应用不能随心所欲地定制配置。想要定制，只能 eject。而 eject 就意味着应用所有的配置都交由使用者维护，繁琐令人望而却步。

现在，通过 wuzzle，我们能够在不 eject 的情况下任意定制 CRA 创建的 React 应用。

不 eject 的情况下查看 CRA webpack 配置

首先，用 CRA 创建一个支持 TypeScript 的演示应用（如果不习惯用 TS 去掉参数 --template typescript 即可）：

$ npx create-react-app --template typescript demo
# ...
$ cd demo

安装 wuzzle：

$ npm i -D wuzzle

打开 package.json 编辑 scripts 挂载 wuzzle：

  "scripts": {
-    "start": "react-scripts start",
+    "start": "wuzzle react-scripts start",
-    "build": "react-scripts build",
+    "build": "wuzzle react-scripts build",
  },

现在，通过参数 --dry-run 运行 start 或 build 脚本就可以直接查看 CRA 内部使用的 webpack 配置了：

$ npm run build -- --dry-run
# ...
@wuzzle/cli:applyConfig Webpack config with difference: {
  # ...
  devtool: # ...
  entry: # ...
  output: #...
  cache: #...
  resolve: # ...
  module: # ...
  plugins: # ...
  # ...
}

不 eject 的情况下引入 less、使用 antd

在样式文件上，CRA 应用支持 css、scss/sass，但不支持 less。想要全面使用 antd 并做主题修改，需要在 webpack 配置引入 less。回到 --dry-run 运行结果细看一下 module 字段：

$ npm run build -- --dry-run
# ...
@wuzzle/cli:applyConfig Webpack config with difference: {
  # ...
  module: {
    # ...
    rules: [
      # ...
      {
        oneOf: [
          # ...
          {
            test: /\.(scss|sass)$/,
            exclude: /\.module\.(scss|sass)$/,
            use: [
              {
                loader: '.../mini-css-extract-plugin/dist/loader.js',
                options: {}
              },
              {
                loader: '.../css-loader/...',
                options: # ...
              },
              {
                loader: '.../postcss-loader/...',
                options: # ...
              },
              {
                loader: '.../resolve-url-loader/...',
                options: # ...
              },
              {
                loader: '.../sass-loader/...',
                options: # ...
              }
            ],
          },
          {
            test: /\.module\.(scss|sass)$/,
            use: [
              {
                loader: '.../mini-css-extract-plugin/dist/loader.js',
                options: # ...
              },
              {
                loader: '.../css-loader/...',
                options: # ...
              },
              {
                loader: '.../postcss-loader/...',
                options: # ...
              },
              {
                loader: '.../resolve-url-loader/...',
                options: # ...
              },
              {
                loader: '.../sass-loader/...',
                options: # ...
              }
            ]
          },
          # ...
        ]
      }
    ]
  },
  # ...
}

不难发现，sass 的配置方法和 less 的很接近，只要稍加改造，把 sass-loader 替换成 less-loader 并去掉 resolve-url-loader 就达成目标了。

安装一下配置 less 所需的依赖：

npm i -D less less-loader

然后，在 package.json 旁创建文件 wuzzle.config.js 修改 CRA 内部使用的 webpack 配置，这里可以使用 wuzzle 提供的修改帮助方法减轻工作量：

const appPaths = require('react-scripts/config/paths');
const {
    deleteUseItem, firstRule