title: How to generate dynamic import chunk name in Webpack
body: <p>I am dynamically calling an import statement in my TypeScript code, based on that Webpack will create chunks like below:</p>
  
  <p><a href="https://i.stack.imgur.com/IUcXy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IUcXy.png" alt="enter image description here"></a></p>
  
  <p>You can see Webpack is automatically generating the file name as <code>1</code>, <code>2</code>, <code>3</code> respectively, the name is not a friendly name.</p>
  
  <p>I have tried a way to provide the chunk name through comment, but it's generating <code>modulename1.bundle.js , modulename2.bundle.js</code></p>
  
  <pre><code>bootStrapApps(config) {
  
      config.apps.forEach(element =&gt; {
  
        registerApplication(
          // Name of our single-spa application
          element.name,
          // Our loading function
          () =&gt;
            import(/* webpackChunkName: "modulename"*/  "../../" +
              config.rootfolder +
              "/" +
              element.name +
              "/" +
  
              "app.bootstrap.js"),
          // Our activity function
          () =&gt; true
        );
      });
      start();
  }
  </code></pre>
  
  <p>Is there any way to specify the module name dynamically though this comment? I don't know this is specific to TypeScript or Webpack.</p>