React-demo

1、配置jsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "baseUrl": "./",
        "moduleResolution": "node",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "jsx": "preserve",
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    }
}

2、在react 项目中进行webpack 配置src 的别名为@

• react 4 版本：npm install @craco/craco
• react 5 版本：npm install @craco/craco@alpha -D
• 创建craco.config.js

• const path = require('path')
  
  const resolve = pathname => path.resolve(__dirname, pathname)
  module.exports = {
    webpack: {
      // 配置 src 的路径别名为@
      alias: {
        // "@": path.resolve(__dirname, "src"),
        "@": resolve("src"),
        "components": resolve("src/components"),
        "utils": resolve("src/utils")
      }
    }
  }

•  配置package.json

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

3、在react 项目中进行webpack 配置less

• 对于craco V7 版本：npm install craco-less@2.1.0-alpha.0
• 对于craco 之前版本： npm install craco-less

• const CracoLessPlugin = require('craco-less');
  
  module.exports = {
    // less
    plugins: [
      {
        plugin: CracoLessPlugin,
      }
    ],
  }