What are module, chunk and bundle in webpack?

Question

I can\'t understand concepts like module, chunk and bundle very well.

{
  entry: {
    foo: [\'webpack/hot/only-dev-server.js\', \'./src/foo.js\'],
    bar: [\'.         


        

Answer 1

I was looking for some more details about splitting bundle intro small parts and found your question… as well as I went so far with this topic and found this from a good article that I really recommend it for you:

A chunk is code which will break apart from main bundle that is main.js and form it’s own file known as chunk file. There are two types of chunks viz. sync and async. Sync chunks are loaded synchronously with main.js and you would see element in source code. Async chunks are loaded on demand (lazy loaded) and you would see network request for async chunk files in developers tool. These chunks are spitted from main.js based on some conditions and we need to tell that to the Webpack. This is done through Webpack plugin known as splitChunksPlugin.

More here: https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312