采用webpack配置路径别名(alias)

随着项目模块增多，导入模块的路径越来越长，从视觉和编程体验上带来很差的体验，webpack提供了配置路径别名的方法，可通过resolve选项中的alias来配置。

alias

resolve.alias选项可以将导入路径映射为一个别名，这样就可以简写文件导入路径。比如原来导入路径为../../../components/user，通过配置alias选项:

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

就可以将../../../components/user简写为$components/user

extensions

extensions选项配置可以省略文件路径的后缀名

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

当同一个目录下存在不同后缀名的文件时，只会匹配第一个。因此如果配置extensions选项，要注意给不同后缀名的文件不同命名，或者不要将相同文件名的文件放到同一个目录。

webpack.config.js配置

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')
        }
    },

采用TypeScript静态检查+ESLint检查规则的项目，配置好了webpack的alias, extensions选项，在项目中采用简短路径引入时，仍然会收到类似的报错: Unable to resolve path to module components/user. eslint(import/no-unresolved)。

很明显，错误是eslint报的，因为eslint无法解析路径，要解决这个问题，还需要配置.eslintrc.json文件中的ESLint模块引入配置-import/resolver

.eslintrc.json配置

moduleDirectory指明路径引入模块所在的目录。

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

import/resolver是v0.11中引入的解析器，用于解析项目中导入的模块，目前实现了webpack和node解析以及支持第三方package的解析。

可以在import/resolver直接指定package的配置，也可以通过添加node节点，在node节点中进行更细粒度的控制。

google之后配置moduleDirectory，但是报错仍然存在，我项目中使用的.eslintrc.json文件配置的eslint，网上关于.eslintrc.json的配置资料相对.eslintrc.js类型较少，因此查找资料用了不少时间，好在最终问题得到解决：

配置tsconfig.json文件中的paths选项

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

需要给tsconfig.json配置映射路径，那么typescript-eslint检查就不会报错了

问题解决。

以上就是在TypeScript+React+ESLint架构的项目中通过webpack配置alias的方法，希望能帮到你。

参考资料

Webpack resolve.alias does not work with typescript?

Using eslint with typescript unable to resolve path to module

ESLint-plugin-import github