November 04, 2025

Debugging Webpack Aliases

Ran into a slight issue today with Webpack (v4) aliases.

Since I'm running this app inside a Docker container, I wanted to double check what the aliases were resolving to.

To do that, I temporarily updated the Webpack config so I could log out part of the config object. Specifically the resolve.alias property.

const config = {
  ...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@components": path.resolve(__dirname, "src/components"),
      "@views": path.resolve(__dirname, "src/views"),
      "@assets": path.resolve(__dirname, "src/assets"),
      "@store": path.resolve(__dirname, "src/store"),
    },
  },
  ...
};

console.log("Alias mappings:", config.resolve.alias);

module.exports = config;

Now whenever I ran a build, I see the following in my terminal:

Alias mappings: {
  '@': '/app/src',
  '@components': '/app/src/components',
  '@views': '/app/src/views',
  '@assets': '/app/src/assets',
  '@store': '/app/src/store'
}

Quick sanity check that allowed me to confirm my aliases are resolving correctly inside the container 🤘