Misfortune lies where happiness lies, and happiness lies where misfortune lies. Lao tzu

Introduction to the

Bundle, module, and chunk are all webpack terms. Here’s how they are defined one by one.

Bundle

Bundles are generated by a number of different modules. Bundles contain versions of the final source files that have already been loaded and compiled. Bundle Splitting :** This process provides a way to optimize builds by allowing WebPack to generate multiple bundles for an application. The net effect is that when some of the other bundles are changed, other bundles that are independent of each other are not affected, reducing the amount of code that needs to be redistributed and thus re-downloaded by the client and used by the browser cache.

Module

** Modules ** provide discrete chunks of functionality that are smaller than the surface area of the full program. Well-written modules provide solid boundaries of abstraction and encapsulation, allowing each module in an application to have a coherent design and a clear purpose. A Module can be a dependent Module on another Module. Resolver is a libary that helps you find the absolute path to a Module that cannot be found. The Module will be searched in all directories specified in resolve.

Chunk

Chunk is a Webpack-specific term used internally to manage the building process. A bundle consists of chunks. There are several types of bundles (for example, entry chunk and child chunk). Typically chunks correspond directly to the bundle being output, but some configurations do not create a one-to-one relationship. Code Splitting refers to Splitting Code into each bundle /chunks that you can load on demand instead of loading a bundle that contains the whole bundle. The webpack Configuration file is a plain JavaScript file that is exported as an object. It is then processed by Webpack according to the properties defined by this object.

Bundle VS Chunk VS Module

In terms of definition and period:

  • “Modules”(module)We are all familiar with the concept ofCommonJS module,AMD,ES6 ModulesThe module
  • chunkRepresents the module generated when packaging, which is composed by himbundle
  • Package the completed source code

We will now just create a WebPack configuration that compiles JS as follows:

  1. Create an empty file and open it in a folderbash or cmd.
  2. npm init -ygeneratepackage.json.
  3. If you install itcnpm or yarnIs executedcnpm i webpack webpack-cli -DTo installwebpackThe package.
  4. createsrcIn thesrcInternal createchunk0.js,chunk1.js,common.js,index.js,style.cssAnd write internal code
  5. Created in the project root directorywebpack.config.js
  6. Directly in thecmdRunning in thewebpack

Here is the code chunk0.js

export default function add(a, b) {
  return a + b;
}
Copy the code

chunk1.js

export default function flow() {
  return "flow";
}
Copy the code

common.js

export default function commonJs() {
  return "commonJs";
}
Copy the code

index.js

import add from "./chunk0.js";
import commonJs from "./common";
console.log(add(1.2));
console.log(commonJs());
Copy the code

webpack.config.js

module.exports = {
  mode: "production".// If you do not add it, you will be warned
  entry: {
    index: "./src/index.js".// an entry file
    chunk1: "./src/chunk1.js" // Two entry files
  },
  output: {
    filename: "[name].bundle.js" // Export file}};Copy the code

The effect of the run is as follows

From the above code, we know that Module is the code before compilation. It generates chunk files according to the file reference relationship through Webpack. After processing chunk files, Webpack generates the code bundle running in the browser.

reference

Interview essentials! The 5 most confusing points in webpack

In-depth understanding of Webpack packaging chunking (Part 1)