Having trouble with the webpack module resolution

These're two ways to inform webpack of extra location to look for a module.

// webpack.config.js

module.exports = {
  //...
  resolve: {
    // 1. add extra `node_modules` directory to search path
    modules: ['node_modules', '/abs_path/to/global/node_modules'],
    // 2. use alias to explicitly map a module name to its exact location
    alias: {
      '@abc': '/abs_path/to/global/node_modules/@abc'
    }
  }
};

For your use case, if you only has @abc module sitting outside the conventional local node_modules directory, I'd recommend you use resolve.alias.

Source: https://webpack.js.org/configuration/resolve/#resolvemodules.

If you are doing an import like this:

import SomeComponent from '@abc/components';

You are telling Webpack to import a module named @abc/components from its "resolve root". This resolve root is normally 'node_modules'. (Imagine if @abc/components was an npm package, that'd work fine.)

As you obtained this library from a different source via your command line tool, you will have these dependencies at a different location. Webpack won't magically recognize these, but you have a few simple options:

1. Make abc-cli copy the abc's component files to app's node_modules/@abc.
2. Create a symlink in app's node_modules called @abc that points to abc's folder. Webpack traverses symlinks by default and this spares you the time to copy the files each time. Slightly better solution IMO, especially if abc changes more than once in a while.
3. Tell webpack to also search for modules in @abc's folder, not just node_modules. You can do that using resolve.modules just like Ngô Hùng Phúc showed in his answer. Be a little careful though, as you are importing the modules like @abc/components you have to point webpack to the directory one level above @abc, and of course this requires abc's component directory to be called @abc.