为何Webpack配置resolve.alias时报错？别名含子串引发问题

Hey, I’ve dealt with this exact Webpack alias issue before—let’s break down why this is happening and how to get your imports working correctly:

What’s Going Wrong? #

You mentioned that import app from 'base/config' works fine, but paths like base/app/module throw "Module not found" errors. Given that one alias key is a substring of the other, there are two likely culprits:

• Incorrect Directory Path Configuration
  Let’s say your Webpack config has aliases set up like this:

  resolve: {
    alias: {
      'base': path.resolve(__dirname, 'src'), // No trailing slash here
      'base/config': path.resolve(__dirname, 'src/config.js')
    }
  }
  

  Webpack uses longest prefix matching for aliases, so base/config gets correctly mapped to src/config.js. But when it parses base/app/module, it only matches the shorter base alias—and since the path doesn’t have a trailing slash, it glues them together as srcapp/module instead of src/app/module. That’s why it can’t find the module!

• Accidental Exact Matching
  If you added a $ suffix to your base alias (like base$), that tells Webpack to only match exact imports of base (e.g., import 'base'). Any path with a subdirectory (like base/app/module) won’t trigger the alias at all, leading to the same error.

How to Fix It #

Here are the straightforward fixes for each scenario:

• Add a Trailing Slash to Directory Aliases
  Update your base alias to include a trailing slash at the end of the path. This tells Webpack to treat it as a directory and properly append subpaths:

  const path = require('path');
  
  module.exports = {
    // ... rest of your config
    resolve: {
      alias: {
        'base/config': path.resolve(__dirname, 'src/config.js'),
        'base': path.resolve(__dirname, 'src/') // Trailing slash added here
      }
    }
  };
  

  Now base/app/module will correctly resolve to src/app/module, while base/config still gets priority and maps to src/config.js.

• Remove Exact Matching Suffix (If You Used It)
  If you had base$ in your aliases, drop the $ so Webpack matches any path starting with base:

  // Bad: Only matches exact 'base' imports
  'base$': path.resolve(__dirname, 'src/')
  
  // Good: Matches 'base', 'base/app', 'base/component', etc.
  'base': path.resolve(__dirname, 'src/')
  

• Verify the Fix
  Restart your Webpack dev server and test your imports again:

  • import app from 'base/config' should still load src/config.js without issues
  • import module from 'base/app/module' and import component from 'base/component/module' should now resolve to their respective files in the src directory

内容的提问来源于stack exchange，提问作者Moo3