webpack小记——alias与eslint

最新推荐文章于 2025-01-27 22:47:00 发布

weixin_34195364

最新推荐文章于 2025-01-27 22:47:00 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

文章标签： webpack ViewUI

原文链接：https://juejin.im/post/5cc67369e51d456e660d453d

在webpack项目之中，我们会借助alias别名提升代码效率和打包效率。

但是在使用了自定义的路径指向后，eslint就会对应产生找不到模块的报错。

Unable to resolve path to module '@/component' import/no-unresolved
复制代码

这个时候，就要使用npm包eslint-import-resolver-alias来解决了

cnpm i eslint-import-resolver-alias -D
复制代码

在.eslintrc.js配置文件之中进行添加

// webpack配置
alias: {
    '@': resolve(__dirname, '../src/'),
    '@scss': resolve(__dirname, '../src/scss/'),
}

// eslint配置
...
settings: {
  'import/resolver': {
    alias: {
      map: [
        ['@', './src/'],
        ['@scss', './src/styles/'],
      ],
    }
  }
}
复制代码