webpack小记——alias与eslint

在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/'],
      ],
    }
  }
}

这样就不会报错了