webpack项目中import如何引用根目录？

Question

我的打包入口文件是index.js，同目录下还有common.css等文件
但是这个文件下有多个层级很深的文件夹，如果这些层级很深的文件夹里面某个js文件需要import文件common.css，我现在只能用无数多个../../实现，有什么方法可以快速引用到这个路径吗？

Answer 1

可以通过 webpack 的 resolve.alias 配置一个目录的别名，import 时直接以别名开头写引用路径就可以了。

如下的配置就可以使用 @ 指代 /src 路径。

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      @: path.resolve(__dirname, 'src')
    }
  }
}

具体可以看官方文档

Answer 2

用“@/”符号就是根目录