Webpack module identifier (modules Identifiers)

Let's add a second module to the project print.js :

Project

webpack-demo|- package.json|- webpack.config.js|- /dist|- /src  |- index.js+ |- print.js|- /node_modules

Print.js

+ export default function print(text) {+   console.log(text);+ };

Src/index.js

  import _ from ‘lodash‘;+ import Print from ‘./print‘;  function component() {    var element = document.createElement(‘div‘);    // lodash 是由当前 script 脚本 import 导入进来的    element.innerHTML = _.join([‘Hello‘, ‘webpack‘], ‘ ‘);+   element.onClick = Print.bind(null, ‘Hello webpack!‘);    return element;  }  document.body.appendChild(component());

Run the build again, and what we expect is that only the main bundle's hash changes, however ...

Hash:d38a06644fdbb898d795Version:webpack 3.3.0time:1445ms Asset Size Chunks Chunk Names vendor.a7561fb0e9a071baadb9.js 541 KB 0[Emitted][Big] Vendor Main.b746e3eb72875af2caa9.js 1.22 KB 1[Emitted] Mainruntime.1400d5af64fc1b7b3a45.js 5.85 KB 2[Emitted] Runtime index.html 352 bytes[Emitted][1]./src/index.js 421 bytes{1}[Built][2](Webpack)/buildin/global.js 509 bytes{0}[Built [3  (Webpack{0} [built  [4{1} [built] [5 multi lodash bytes {0 } [built] + 1 hidden module     

...... We can see that the hashes of the three files have changed. This is because each module.id increment is based on the default parsing order (resolve order). That is, when the parsing order changes, the ID will change as well. So, briefly summarize:

• mainBundles change as they are modified by what they add.
• vendorBundles change as their own module.id modifications occur.
• runtimeThe bundle will change because it currently contains a reference to a new module.

The first and last are expected behavior--and vendor the hash change is what we want to fix. Fortunately, you can use two plugins to solve this problem. The first plug-in is that the path to the NamedModulesPlugin module will be used instead of the numeric identifier. While this plug-in facilitates the readability of the results during development, the execution time is longer. The second option is to use HashedModuleIdsPlugin , which is recommended for production environment construction:

Webpack.config.js

  const path = require(‘path‘);  const webpack = require(‘webpack‘);  const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);  const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);  module.exports = {    entry: {      main: ‘./src/index.js‘,      vendor: [        ‘lodash‘      ]    },    plugins: [      new CleanWebpackPlugin([‘dist‘]),      new HtmlWebpackPlugin({        title: ‘Caching‘      }),+     new webpack.HashedModuleIdsPlugin(),      new webpack.optimize.CommonsChunkPlugin({        name: ‘vendor‘      }),      new webpack.optimize.CommonsChunkPlugin({        name: ‘runtime‘      })    ],    output: {      filename: ‘[name].[contenthash].js‘,      path: path.resolve(__dirname, ‘dist‘)    }  };

Now, regardless of adding any new local dependencies, the vendor hash should be consistent for each build:

Hash:1f49b42afb9a5acfbaffversion:webpack 3.3.0time:1372ms Asset Size Chunks Chunk Names vendor.eed6dcc3b30cfa138aaa.js 541 KB 0[Emitted][Big] Vendor Main.d103ac311788fcb7e329.js 1.22 KB 1[Emitted] Mainruntime.d2a6dc1ccece13f5a164.js 5.85 KB 2[Emitted] Runtime index.html 352 bytes[Emitted][3di9]./src/print.js bytes{1}[Built][3IRH](Webpack)/buildin/module.js 517 bytes{0}[Built][dur2  (Webpack{0} [built  [0 multi Lodash bytes {0} [built][lVK7< Span class= "token punctuation" >/src/index.js 421 bytes {1} [built] + 1 hidden module   

Then, modify our src/index.js , temporarily remove the additional dependencies:

Src/index.js

  import _ from ‘lodash‘;- import Print from ‘./print‘;+ // import Print from ‘./print‘;  function component() {    var element = document.createElement(‘div‘);    // lodash 是由当前 script 脚本 import 导入进来的    element.innerHTML = _.join([‘Hello‘, ‘webpack‘], ‘ ‘);-   element.onClick = Print.bind(null, ‘Hello webpack!‘);+   // element.onClick = Print.bind(null, ‘Hello webpack!‘);    return element;  }  document.body.appendChild(component());

Finally, run our build again:

Hash:37e1358f135c0b992f72version:webpack 3.3.0time:1557ms Asset Size Chunks Chunk Names vendor.eed6dcc3b30cfa138aaa.js 541 KB 0[Emitted][Big] Vendor Main.fc7f38e648da79db2aba.js 891 bytes 1[Emitted] Mainruntime.bb5820632fb66c3fb357.js 5.85 KB 2[Emitted] Runtime index.html 352 bytes[Emitted][3IRH](Webpack)/buildin/module.js 517 bytes{0}[Built][dur2  (Webpack{0} [built  [0 multi Lodash bytes {0} [built][lVK7< Span class= "token punctuation" >/src/index.js 427 bytes {1} [built] + 1 hidden module   

We can see that in these two builds, the vendor bundle's file name is all eed6dcc3b30cfa138aaa .

Webpack module identifier (modules Identifiers)