How to get WebStorm code completion when using a WebPack built bundle from HTML file?

Question

Let's start with my example src/index.js file:

export function foobar() {}

The WebPack config:

module.exports = [
  {
    mode: 'development',
    entry: './src/index.js',
    resolve: {
      extensions: ['.js'],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
      library: 'MyBundle',
    },
  }
]

When running webpack the dist/bundle.js is created.

I create a new WebStorm project and an index.html file in which I load the bundle with <script src="bundle.js"></script>

Now, if I type MyBundle. there is no completion.

But if I open the index.html file in a Browser, and type in the dev console MyBundle., there is a completion for foobar() function.

Is there a way to get the same completion in WebStorm ? I tried with source map with no luck.

Answer 1

MyBundle is available in runtime, but there is no such object in your source code, and the generated bundle is excluded from indexing for better performance/navigation/etc. Resolving it during static code analysis requires providing special support for the way webpack exposes libraries, namely for its output.library property. If you miss it, feel free to file a feature request to youtrack.

For now, I can only suggest using JSDoc annotations to let the IDE know about your library. Like:

/**
 * @namespace MyBundle
 */

/**
 * @memberOf MyBundle
 */
export function foobar() {}