Webpack 中配置 alias 遇到的问题及解决方法
在 Webpack 中，alias 配置可以方便地将项目中的路径映射为指定的别名。这样做可以简化代码中的路径书写，提高代码的可读性和维护性。但是，在实际的开发过程中，我们可能会遇到一些问题。本文就结合实际经验，探讨一下使用 Webpack 配置 alias 时可能遇到的问题及解决方法。
一、alias 配置的基本使用
在 Webpack 中，要配置 alias 只需要在 webpack.config.js 文件中进行如下配置：
module.exports = {
// ...
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
}其中，alias 的键名为别名，键值为目标路径。在上述例子中，我们将 src 目录映射成了 @ 符号，这样在引入 src 目录下的文件时，可以写成 @/path/to/file 的方式。
二、使用 alias 配置可能遇到的问题
- alias 配置不起作用
在 Webpack 中，alias 配置有时会出现不起作用的情况，这通常是因为启动 Webpack 时缺少了相应的配置。具体来说，有以下两种可能的原因：
① 缺少 resolve.alias 配置
在 Webpack 中，resolve 属性可以配置用于解析模块路径的规则。如果没有配置，Webpack 会默认按照 node_modules 中的模块规则去寻找模块。因此，如果我们要使用 alias ，必须将它配置在 resolve.alias 中，如下所示：
module.exports = {
// ...
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
}② 缺少 module 属性的配置
当 alias 配置生效后，使用 alias 引入模块也可能会失败，原因是缺少 module 属性的配置。如果不加处理，Webpack 默认会在 node_modules 下查找引入的模块名。在这种情况下，我们可以在 webpack.config.js 中添加 module 属性来指定资源查找的路径：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
------ -
---- ----------------------- ------
--
-------- ------------------------ ------- ---------------
-
-其中，第一项 path.resolve(__dirname, 'src') 指定了首先查找的目录，第二项 'node_modules' 指定了当查找不到时，继续在 node_modules 中查找。
- 在 Vue 项目中使用 alias 配置
在 Vue 项目中使用 alias 配置的过程中，我们有时会发现引入模块时会出现路径错误的情况。这种情况下，一般是因为 Vue CLI 的 alias 配置不起作用导致的。Vue CLI 为了方便开发，内置了一些别名（alias）来减少我们编写的代码量。例如，@ 代表 /src，但是在 Webpack 中配置 alias 的时候，Vue CLI 官方文档并没有详细的解释。
在这种情况下，我们可以使用 vue.config.js 来覆盖掉根目录下的默认设置。我们可以将 vue.config.js 配置成如下样子：
-- -------------------- ---- -------
-------------- - -
----------------- -
-------- -
------ -
---- ----------------------- ------
--
-------- ------------------------ ------- ---------------
-
-
-其中 configureWebpack 用来覆盖 Webpack 的默认配置，resolve 配置与指令一样。这样，我们就可以愉快的使用 alias 配置了。
三、总结
使用 Webpack 中的 alias 配置可以大幅提高项目的可维护性和代码可读性。在使用 alias 配置时，我们不能忘记把配置信息放到正确的位置，同时尽量避免与 Vue 组件中的配置信息产生冲突，保证别名能够正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6cb41f6b2d6eab3225a33