Search code examples
reactjswebpackreact-routercode-splitting

What bundles include after Webpack and React-Lazy Code Splitting?

I am new using webpack so I dont understand very well how it works.

I have split my main bundle in different smaller files using webpack and React.Lazy in the imports.

After the build process, all works well and generate all these files:

enter image description here

Now, my problem is, that I have only one entry point to my App: index.html

What .js file I have to include in the index.html?

If I only include this one:

<script type="text/javascript" defer src="./js/vendors~main.js"></script>

I have an error running my app:

VM6636 vendors~main.js:22 ChunkLoadError: Loading chunk 0 failed.
(error: file:///*********************/dist/0.js)

Before Code Splitting, I had only two different files: main.js and vendors-main.js so at my index.html imported both.

Thanks in advance!!!

--

If its important, this is my Webpack.config.js

  plugins: [

     new HtmlWebpackPlugin({
     filename: '../index.html',
     template: './src/index.html'
     }),
    ]

}
Solution

  • I believe you should be able to instruct your HtmlWebpackPlugin to insert the required initial chunks into the index.html file with the inject option. 

    // webpack.config.js

// ...

new HtmlWebpackPlugin({
  filename: '../index.html',
  template: './src/index.html',
  inject: true
}),

    This means you can remove the bundled <script> tag(s) from your index.html template, since the plugin will handle it for you.