Does Hash and Chunkhash look familiar in webpack?

preface

I have been researching webpack recently, and I have organized several articles, from which I can learn many useful plug-ins and some modules of Node. Today I will introduce hash and chunkhash, which are often seen in the process of webpack packaging. If you are interested, you can follow my Github, click a star, follow and like, 🙏

Use of both

// Hash case
output: {
  path: path.resolve(__dirname, '.. /dist/static'),
  publicPath: '/'.filename: 'static/js/[name].[hash].js'.chunkFilename: 'static/js/[id].[hash].js'
}
// Use chunkhash
output: {
  path: config.prod.assetsRoot,
  filename: 'static/js/[name]-[chunkhash:16].js'.chunkFilename: 'static/js/[id]-[chunkhash:16].js'.publicPath: '/'
},Copy the code

When used generally, it is used in the output of files, CSS and JS, used to package the output of files

What are hash and chunkhash

As everybody knows, is used to optimize the page properties of the commonly used method is to use the browser’s cache, file hash value, is the equivalent of a file id card, very applicable to the static front the version management of resources, one of the front end to achieve incremental updating scheme, that why there are two things, we talk, look at the definition of both

• hash

[hash] is replaced by the hash of the compilation.

The hash value of the compilation

• chunkhash

[chunkhash] is replaced by the hash of the chunk.

The chunk of the hash value

The latter is easy to understand because chunk in Webpack is a module, so chunkhash is by definition a hash value calculated from the contents of the module. So before we understand the former let’s just look at what programmer does. Okay

Compilation of the sc

This is explained in the HOW TO WRITE A PLUGIN in the Webpack documentation

A compilation object represents a single build of versioned assets. While running Webpack development middleware, a new compilation will be created each time a file change is detected, thus generating a new set of compiled assets. A compilation surfaces information about the present state of module resources, compiled assets, changed files, and watched dependencies. The compilation also provides many callback points at which a plugin may choose to perform custom actions.

Translation:

The compilation object represents the compilation process for a particular version of a resource. When you run webpack’s Development middleware, a new comilation object is created every time a file is detected to be updated, causing a new set of resource compilations. A compilation contains superficial information about the current state of module resources, the resources being compiled, changed files, and listening dependencies. Compilation also provides a number of callbacks to nodes on which a plug-in may choose to perform specified operations

The compiler object corresponding to compilation is also introduced to make compilation easier to understand

The compiler object represents the fully configured Webpack environment. This object is built once upon starting Webpack, and is configured with all operational settings including options, loaders, and plugins. When applying a plugin to the Webpack environment, the plugin will receive a reference to this compiler. Use the compiler to access the main Webpack environment.

Translation:

Compiler object represents the configuration environment of the whole Webpack. This object is only built once at the beginning of Webpack, and all operation Settings including options, loaders and Plugin will be configured. When the plug-in is applied in Webpack, The plug-in accepts a reference to the Compiler object. Use this compiler through the main webPack environment.

The compiler compiler is for webpack, which is the same webpack environment, and the compilation process is that every time a file is updated, it regenerates a file, so when you update a file, all the hash fields change, and that’s a bit of a mess. We are doing incremental updates to change the file we want to change, but it is meaningless if all changes are made. Let’s look at an example in action:

• Modifies the hash of the previous file

• Modified hash of the file

As you can see in the figure above, every time a file is updated, a new compilation is created, and that new compilation is used to compute a new hash, with the same hash value for each file. – chunkhash

chunkhash

Chunkhash is the hash value calculated by chunk. Chunk refers to the module, and the hash value is the hash value calculated by the contents of the module

• Modify chunkhash before a single file

• Modified file for chunkhash

There is a problem here, for example, with frameworks like Vue that put JS and CSS together, we usually use a plugin called extract-text-webpack-plugin so that we can package CSS separately, but this creates a problem. Will the chunkhash of CSS be the same as the chunkhash of JS? We can take a look at the following two pictures.

In fact, it is very simple, the concept of Webpack is for JS packaging, style tag will also be regarded as a part of JS, so we will find that there is still a pit, when we only change CSS, JS will change at the same time, so we still haven’t done incremental update in the strict sense, so how should we solve it?

contenthash

The usage is as follows:

new ExtractTextPlugin({
  filename: 'static/css/[name]-[contenthash:16].css'.allChunks: true
})Copy the code

So let’s see what happens when we pack.

conclusion

The management of static resources is a very important part of the front end. Recently, due to the business transformation, I am trying to change the shelf, so I must start with the study of Webpack. Now Webpack has become one of the indispensable tools. If you like it, you can go to Github and click a star. You can like it or follow it. I’m a little busy recently, but I still write a little blog every day. Thank you for your attention