webpack配置路径别名不生效的问题

发布日期: 2020-01-07

文章字数: 328

前言

最近笔者在做一个基于 next 框架的网站应用，但是项目层级多了之后在文件中引用的时候总会有一大堆的../../，不光不雅观，而且影响开发效率，所以小编决定进行 webpack 配置路径别名，方便引用~

配置

笔者项目的技术架构是：react + next + typeScript + antd。
笔者项目文件目录如下图：

页面文件都在 pages 文件夹下，而组件则放在 components 文件夹下，工具函数放在 utils 文件夹……，所以笔者想要给 components、utils、layout……等文件夹设置路径别名，步骤如下：

打开 next.config.js 文件，这个文件是手脚架初始化之后就有的，里面保存的是项目的配置信息。在改文件中添加如下代码：

config.resolve.alias = {
  ...config.resolve.alias,
  "@components": path.resolve(__dirname, "./components"),
  "@config": path.join(__dirname, ".", "config"),
  "@layout": path.join(__dirname, ".", "layout"),
  "@static": path.join(__dirname, ".", "static"),
  "@utils": path.join(__dirname, ".", "utils"),
  "@server": path.join(__dirname, ".", "server")
};

如果不知道添在哪，可以参考笔者的配置：

打开 tsconfig.json 文件，这个文件是保存 ts 相关配置的，将要配置的路径别名配置加到 compilerOptions 配置里面即可。代码如下：

"baseUrl": ".",
    "paths": {
      "@components/*": ["./components/*"],
      "@config/*": ["./config/*"],
      "@layout/*": ["./layout/*"],
      "@static/*": ["./static/*"],
      "@utils/*": ["./utils/*"],
      "@server/*": ["./server/*"]
    }