As the number of project modules increases and the path to import modules becomes longer, resulting in a poor visual and programming experience, WebPack provides a way to configure the path alias, which can be configured through alias in the Resolve option.

alias

The resolve.alias option maps the import path to an alias so that you can abbreviate the file import path. For example, the original import path is.. /.. /.. /components/user, by configuring the alias option:

reslove: {
    alias: {
        $components: path.resolve(__dirname, 'src/components')
    }
}
Copy the code

You can turn… /.. /.. /components/user = $components/user

extensions

The Extensions option enables you to omit the file path suffix

reslove: {
    alias: {
        $components: path.resolve(__dirname, 'src/components')
    },
    extensions: ['.js', '.jsx', '.ts', '.tsx']
}
Copy the code

If files with different file name extensions exist in the same directory, only the first file name extension is matched. Therefore, if you configure the Extensions option, be careful to name files with different suffixes differently, or to avoid placing files with the same file name in the same directory.

Webpack. Config. Js configuration

resolve: {
        extensions: ['.js'.'.jsx'.'.ts'.'.tsx'.'.css'.'.scss'.'.sass'.'.svg'.'.less'].alias: {
            'axios': path.resolve(__dirname, '.. /node_modules/axios/dist/axios.js'),
            'components': path.resolve(__dirname, '.. /src/components'),
            'model': path.resolve(__dirname, '.. /src/model'),
            'utils': path.resolve(__dirname, '.. /src/utils'),
            'constants': path.resolve(__dirname, '.. /src/constants'),
            'src': path.resolve(__dirname, '.. /src')}},Copy the code

A project that uses TypeScript static checking +ESLint to check for webpack alias and Extensions will still receive a similar error when using short path import in the project: Unable to resolve path to module components/ user.eslint (import/no-unresolved).

The esLint module in the eslintrc.json file introduces the configuration -import/resolver

. Eslintrc. Json configuration

ModuleDirectory Specifies the directory where the imported module resides.

"settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js".".jsx".".ts".".tsx"]."moduleDirectory": ["node_modules"."src/"]}}}Copy the code

Import /resolver is a parser introduced in V0.11 to resolve imported modules in a project. It currently implements Webpack and Node resolution and supports third-party package resolution.

Configuration of the package can be specified directly in import/resolver, or more granular control can be achieved in node nodes by adding node nodes.

Json file that I used in my project to configure ESLint. Eslintrc. json configuration information on the Internet about.eslintrc.json configuration information is less than.eslintrc.js type. So it took some time to find the data, but finally the problem was solved:

configurationtsconfig.jsonIn the filepathsoptions

"paths": {
        "components/*": ["src/components/*"],
        "stores/*": ["src/stores/*"],
        "constants/*": ["src/constants/*"],
        "utils/*": ["src/utils/*"]
}
Copy the code

The tsconfig.json mapping path needs to be configured so that typescript-ESLint checking does not report errors

Problem solved.

Configure alias in TypeScript+React+ESLint projects using WebPack.

The resources

Webpack resolve.alias does not work with typescript?

Using eslint with typescript unable to resolve path to module

ESLint-plugin-import github