CRA应用使用craco实现webpack配置+module.less+src别名配置

前言：总所周知，create-react-app 是目前最受欢迎的创建 React 应用的手脚架之一，下面简称CRA；CRA 最推荐更改 webpack 配置的当属使用 craco，下面我们一起来看看配置吧。

一、创建 cra 应用

npx create-react-app my-app --template typescript
cd my-app
npm start

二、安装和配置 craco

• 为什么使用craco
  使用create-react-app 创建的项目默认是无法修改其内部的webpack配置的，不像vue-cli那样可以通过一个配置文件修改。
  虽然有一个eject 命令可以是将配置完全暴露出来，但这是一个不可逆的操作，同时也会失去CRA带来的便利和后续升级。
  如果想要无 eject 重写 CRA 配置，目前成熟的是下面这几种方式
  1. 通过 CRA 官方支持的 --scripts-version 参数，创建项目时使用自己重写过的 react-scripts 包
  2. 使用 react-app-rewired + customize-cra 组合覆盖配置
  3. 使用 craco 覆盖配置

1. 安装 craco 依赖

yarn add @craco/craco
or 
npm i @craco/craco

2. 修改pacage.json中的启动脚本命令，找到 pacage.json 文件的 scripts 项修改

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

3. 在项目根目录创建craco.config.js配置文件【这里的配置包括下面用到的，以及代码混淆配置，打包输出的一些简单配置等，仅供参考】

const path = require("path");
const addPath = (dir) => path.join(__dirname, dir);
const CracoLessPlugin = require("craco-less");
const { name } = require("./package.json");
const WebpackObfuscator = require("webpack-obfuscator");
const { whenProd } = require("@craco/craco");
// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

const PORT = 9000;
let HOST = "127.0.0.1";
const publicPath = {
  development: `http://${HOST}:${PORT}`,
  production: `https://xxxxx/${name}`,
};

module.exports = {
  devServer: {
    port: PORT,
    client: {
      webSocketURL: {
        hostname: HOST,
      },
    },
  },
  webpack: {
    alias: {
      "@": addPath("src"),
    },
    configure: {
      output: {
        publicPath: publicPath[process.env.NODE_ENV] + "/",
        library: `${name}-[name]`,
        libraryTarget: "umd",
        chunkLoadingGlobal: `webpackJsonp_${name}`,
      },
      module: {
        rules: [
          ...whenProd(() => {
            return [
              {
                test: /\.(js|ts)$/,
                enforce: "post",
                use: [
                  {
                    loader: WebpackObfuscator.loader,
                    options: {
                      compact: false,
                      controlFlowFlattening: true,
                      controlFlowFlatteningThreshold: 1,
                      numbersToExpressions: true,
                      simplify: true,
                      shuffleStringArray: true,
                      splitStrings: true,
                      stringArrayThreshold: 1,
                      stringArrayEncoding: ["base64"],
                    },
                  },
                ],
                include: [path.resolve(__dirname, "src/api")],
              },
            ];
          }, []),
        ],
      },
    },
    // plugins: [
    //   new BundleAnalyzerPlugin({
    //     analyzerMode: "server",
    //     analyzerHost: "127.0.0.1",
    //     analyzerPort: 8888,
    //     openAnalyzer: true, // 构建完打开浏览器
    //     reportFilename: path.resolve(__dirname, `analyzer/index.html`),
    //   }),
    // ]
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true,
          },
        },
      },
    }
  ]
};

三、配置别名

1. 上面的craco.config.js --> webpack --> alias 已经配置
2. 然后，我们配置 ts，找到 tsconfig.json 加入

	"baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },

四、配置 module.less

1. 安装less和craco-less

yarn add less craco-less
or
npm i less craco-less

2. craco-less 插件 配置，上面 craco.config.js 已配置，具体代码如下

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true,
          },
        },
      },
    }
  ]
};

3. 进行类型声明，找到 react-app-env.d.ts 文件

/// <reference types="react-scripts" />

declare module "*.module.less" {
  const classes: Record<string, string>;
  export default classes;
}
declare module "*.less" {
  const classes: Record<string, string>;
  export default classes;
}

五、总结

至此已经轻松的配置完基于 cra 脚手架应用，使用 craco 实现【module less + 别名配置 + 代码混淆配置】的基本配置，各位亲爱的粉丝可以动手实践吧，有问题评论区留言。