Webpack能否定义以美元符号$开头的别名？

当然可以定义以$开头的Webpack别名！不过你遇到的问题确实和Webpack对$符号的特殊规则有点关系——你提到的“末尾$表示精确匹配”是Webpack的一个规则，但开头的$本身并不是Webpack的保留字符，你之前切换后失败，大概率是配置细节或者配套工具的同步没做好。

我给你梳理下正确的操作步骤和避坑点：

• 先搞定Webpack核心配置
  在你的webpack.config.js（或者脚手架对应的配置文件，比如vue.config.js、craco.config.js）里，直接把$开头的别名当作普通键来定义就行，注意如果需要精确匹配才在末尾加$，开头的$直接写在键名里：

  const path = require('path');
  module.exports = {
    resolve: {
      alias: {
        // 定义$utils指向src/utils目录，支持$utils/xxx的导入
        '$utils': path.resolve(__dirname, 'src/utils/'),
        // 如果要精确匹配$utils（比如导入import utils from '$utils'时直接指向index.js），才加末尾$
        // '$utils$': path.resolve(__dirname, 'src/utils/index.js')
      }
    }
  }
  

• 同步更新配套工具的配置
  这是很多人容易忽略的点：你之前用@开头没问题，换成$后，ESLint、TypeScript这类工具可能默认不识别这个新别名，会报错“找不到模块”。

  • 如果用ESLint，要在.eslintrc.js里配置webpack解析器：

    module.exports = {
      settings: {
        'import/resolver': {
          webpack: {
            config: 'webpack.config.js' // 指向你的Webpack配置文件路径
          }
        }
      }
    }
    

  • 如果用TypeScript，还要在tsconfig.json里的paths字段同步配置：

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "$utils/*": ["src/utils/*"]
        }
      }
    }
    

• 验证使用
  配置完成后，你就可以像预期那样导入模块了：

  import foo from '$utils/foo';
  

简单来说，Webpack本身完全支持$开头的别名，你之前失败的原因大概率是没同步更新ESLint/TS这类工具的配置，或者不小心把$放在了错误的位置（比如末尾）。按照上面的步骤调整后，就能正常使用啦！

备注：内容来源于stack exchange，提问作者mdmb