Welcome to wechat public account: Front Reading Room

This section describes the internal webPack implementation and may be helpful to plug-in developers

Packaging refers to the ability to process certain files and output them to other files.

However, between the input and output, there are modules, entry points, chunks, chunk groups, and many other intermediate parts.

The main part of

Each file used in a project is a module

./index.js

import app from './app.js';
Copy the code

./app.js

export default 'the app';
Copy the code

By referring to each other, the modules form a ModuleGraph data structure.

During the packaging process, modules are merged into chunks. Chunks merge into chunk groups and form a ModuleGraph that is connected to each other by modules. How to describe an entry point: inside it, a chunk group with only one chunk is created.

./webpack.config.js

module.exports = {
  entry: './index.js'};Copy the code

This creates a chunk group named Main (main is the default name for the entry point). This chunk group contains the./index.js module. New modules are added to the chunk as imports within./index.js are processed by parser.

Another example:

./webpack.config.js

module.exports = {
  entry: {
    home: './home.js'.about: './about.js',}};Copy the code

This creates two chunk groups named Home and About. Each chunk group has a chunk containing a module:./home.js corresponds to home, and./about.js corresponds to about

There can be multiple chunks in a chunk group. For example, SplitChunksPlugin splits a chunk into one or more chunks.

chunk

Chunk comes in two forms:

  • Initial is main Chunk of the entry point. This chunk contains all the modules and their dependencies specified for the entry point.
  • Non-initial is a lazy-loaded block. This may occur when using dynamic imports or SplitChunksPlugin.

Each chunk has a corresponding asset(resource). Resources refer to output files (that is, packaged results).

webpack.config.js

module.exports = {
  entry: './src/index.jsx'};Copy the code

./src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import('./app.jsx').then((App) = > {
  ReactDOM.render(<App />, root);
});
Copy the code

This creates an Initial chunk called Main. These include:

  • ./src/index.jsx
  • react
  • react-dom

And all dependencies except./app.jsx

Non-initial Chunk is then created for./app.jsx, because./app.jsx is dynamically imported.

Output:

  • /dist/main.js – 一个 initial chunk
  • /dist/394.js – non-initial chunk

By default, these non-initial chunks do not have names, so a unique ID is used instead. When using dynamic imports, we can explicitly specify the chunk name by using magic comment:

import(
  /* webpackChunkName: "app" */
  './app.jsx'
).then((App) = > {
  ReactDOM.render(<App />, root);
});
Copy the code

Output:

  • /dist/main.js – 一个 initial chunk
  • /dist/app.js – non-initial chunk

The output (output)

The name of the output file is affected by two fields in the configuration:

  • Output. filename – Used for initial chunk files
  • Output. chunkFilename – Used for non-initial chunk files
  • In some cases, output.filename can be used when initial and non-initial chunks are used.

There will be placeholders in these fields. Common placeholders are as follows:

  • [id] -chunk ID (for example, [id].js -> 485.js)
  • [name] – Chunk name (for example, [name].js -> app.js). If the chunk does not have a name, its ID is used as the name
  • [contenthash] – Output md4-hash of the file contents (e.g. [contenthash].js -> 4ea6ff1de66C537eb9B2.js)

Welcome to wechat public account: Front Reading Room