preface

This article is used to solve some common configuration path problems, such as configuring alias, configuring tsconfig.json is still invalid

1. Configure common items

** Find resolve** in the Webpack configuration file

    resolve: {
    ...,
        alias: {
          '@': path.resolve(__dirname, './src');
        }
    }
Copy the code

2. Ts project

** Root directory tsconfig.json**

"compilerOptions": { ... , "baseUrl": "src", "paths": { "@/*": [ "*" ] } }Copy the code

Because some scaffolding projects reset and modify the tsconfig file, use the extends method in step 3

3. The method extends

  • 1> root directory tsconfig.json
    {
        ...,
        "extends": "./tsconfig.extend.json",
    }
Copy the code
  • 2> Create tsconfig.extend.json in the root directory
    {
      "compilerOptions": {
          "baseUrl": "src",
          "paths": {
              "@/*": [
                  "*"
              ]
          }
      }
    }
Copy the code

4. Craco starts the project

The root directory craco. Config. Js

const CracoAntDesignPlugin = require('craco-antd'); const path = require("path"); const resolve = dir => path.resolve(__dirname, dir); Module. exports = {plugins: [{plugins: cracoantdesignplugins, options: {source: "tsconfig", baseUrl: "./ SRC ", tsConfigPath: "./tsconfig.extend.json", customizeTheme: {'@primary-color': '#5b5bea' }, }, }, ], webpack: { alias: { '@': resolve("src") } } };Copy the code

5. Practical application

    import PageLoading from '@/components/base/pagesLoading' 
Copy the code