title: Webpack Code Splitting 'Loading chunk failed' error wrong file path
body: <p>I'm using React + Typescript with Webpack and I'm trying to load some of my react components when they are actually needed.</p>
  <p>The issue is that when the chunk is requested via lazy loading I'm getting the following error:</p>
  <blockquote>
  <p>Uncaught Error: Loading chunk 1 failed.
  (error: http://localhost:58988/1.chunk.js)
  at HTMLScriptElement.onScriptComplete (bootstrap:114)</p>
  </blockquote>
  <p>This chunk is generated successfully and without any errors, it's just that the path is wrong - <code>http://localhost:58988/1.chunk.js</code> and it should be <code>http://localhost:58988/dist/1.chunk.js</code></p>
  <p>I've also tried using the newest <code>React.lazy</code> to lazy load react components but I'm getting the same issue. So, is there a way to tell the compiler how to resolve these file paths?</p>
  <p><strong>Here's some of the code:</strong></p>
  <p><strong>MyComponent.tsx</strong></p>
  <pre><code>import * as React from &quot;react&quot;;
  import * as ES5Promise from &quot;promise&quot;;
  
  export class MyComponent extends React.Component&lt;{}, {}&gt; {
      constructor(props) {
          super(props);
      }
  
      private readonly onLoadModuleClickHandler = (): void =&gt; {
          import(&quot;./Button&quot;).then((module) =&gt; {
              console.log(module);
          });
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;input type=&quot;button&quot; value=&quot;Load another module&quot; onClick={this.onLoadModuleClickHandler}/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p><strong>tsconfig.json</strong></p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;noImplicitAny&quot;: false,
      &quot;noEmitOnError&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;removeComments&quot;: false,
      &quot;sourceMap&quot;: false,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;noEmit&quot;: true,
      &quot;importHelpers&quot;: true,
      &quot;lib&quot;: [&quot;dom&quot;, &quot;es5&quot;, &quot;es2015.promise&quot;]
    },
    &quot;exclude&quot;: [
      &quot;node_modules&quot;,
      &quot;wwwroot&quot;
    ]
  }
  </code></pre>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>module.exports = {
      entry: {
          &quot;app&quot;: &quot;./src/App.tsx&quot;
      },
      output: {
          path: path.resolve(__dirname, 'wwwroot/dist'),
          filename: &quot;[name].bundle.js&quot;,
          chunkFilename: &quot;[name].chunk.js&quot;
      },
      module: {
          rules: [
              {
                  test: /\.(ts|tsx)?$/,
                  use: &quot;awesome-typescript-loader&quot;,
                  exclude: /node_modules/
              },
              {
                  test: /\.(css|less)?$/,
                  use: [{
                      loader: &quot;style-loader&quot;
                  }, {
                      loader: &quot;css-loader?modules&amp;localIdentName=[local]--[hash:base64:5]&quot;
                  }, {
                      loader: &quot;less-loader&quot;
                  }]
              },
          ]
      },
      resolve: {
          extensions: [&quot;.js&quot;, &quot;.jsx&quot;, &quot;.ts&quot;, &quot;.tsx&quot;, &quot;.css&quot;, &quot;.less&quot;]
      }
  };
  </code></pre>