webpack缓存，webpack 编译生成的文件能够被客户端缓存。

缓存

输出文件的文件名(output filename)

project

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

webpack.config.js

const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new HtmlWebpackPlugin({
-       title: 'Output Management',
+       title: 'Caching',
      }),
    ],
    output: {
-     filename: 'bundle.js',
+     filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
  };

npm run build

npm run build

> webpack-02-start@1.0.0 build
> webpack

asset main.f0c748074a54b646ea6d.js 554 KiB [emitted] [immutable] (name: main)
asset index.html 248 bytes [emitted]
runtime modules 1.25 KiB 6 modules
cacheable modules 532 KiB
  ./src/index.js 310 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
webpack 5.82.1 compiled successfully in 245 ms

提取引导模板(extracting boilerplate)

webpack.config.js

 const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new HtmlWebpackPlugin({
      title: 'Caching',
      }),
    ],
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
+   optimization: {
+     runtimeChunk: 'single',
+   },
  };

npm run build

npm run build

> webpack-02-start@1.0.0 build
> webpack
assets by status 7.62 KiB [cached] 1 asset
asset main.a2b6b46fdc747c08c488.js 551 KiB [emitted] [immutable] (name: main)
asset index.html 309 bytes [emitted]
Entrypoint main 559 KiB = runtime.ec56a5d38c867b9d7078.js 7.62 KiB main.a2b6b46fdc747c08c488.js 551 KiB
runtime modules 3.66 KiB 8 modules
cacheable modules 532 KiB
  ./src/index.js 310 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
webpack 5.82.1 compiled successfully in 243 ms

webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    plugins: [
        new HtmlWebpackPlugin({
        title: 'Caching',
        }),
    ],
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
+   optimization: {
+       runtimeChunk: 'single',
+       splitChunks: {
+       cacheGroups: {
+           vendor: {
+           test: /[\\/]node_modules[\\/]/,
+           name: 'vendors',
+           chunks: 'all',
+           },
+       },
+       },
+   },
};

npm run build

npm run build

> webpack-02-start@1.0.0 build
> webpack

assets by status 7.62 KiB [cached] 1 asset
assets by path *.js 552 KiB
  asset vendors.ddbeb595b066d33b6f15.js 550 KiB [emitted] [immutable] (name: vendors) (id hint: vendor)
  asset main.f0e65d48cb4d9422c525.js 1.91 KiB [emitted] [immutable] (name: main)
asset index.html 370 bytes [emitted]
Entrypoint main 559 KiB = runtime.ec56a5d38c867b9d7078.js 7.62 KiB vendors.ddbeb595b066d33b6f15.js 550 KiB main.f0e65d48cb4d9422c525.js 1.91 KiB
runtime modules 3.66 KiB 8 modules
cacheable modules 532 KiB
  ./src/index.js 310 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
webpack 5.82.1 compiled successfully in 244 ms

模块标识符(module identifier)

在项目中再添加一个模块 print.js：

项目（project）

webpack-demo
|- package.json
|- package-lock.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() {
    const 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());

npm run build

npm run build

> webpack-02-start@1.0.0 build
> webpack

assets by status 557 KiB [cached] 2 assets
assets by path . 3.01 KiB
  asset main.dc15a2b381282892ac0a.js 2.65 KiB [emitted] [immutable] (name: main)
  asset index.html 370 bytes [emitted] [compared for emit]
Entrypoint main 560 KiB = runtime.ec56a5d38c867b9d7078.js 7.62 KiB vendors.ddbeb595b066d33b6f15.js 550 KiB main.dc15a2b381282892ac0a.js 2.65 KiB
runtime modules 3.66 KiB 8 modules
cacheable modules 532 KiB
  ./src/index.js 399 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
  ./src/print.js 67 bytes [built] [code generated]
webpack 5.82.1 compiled successfully in 249 ms

webpack.config.js

 const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Caching',
      }),
    ],
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
    optimization: {
+     moduleIds: 'deterministic',
      runtimeChunk: 'single',
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          },
        },
      },
    },
  };

npm run build

npm run build

> webpack-02-start@1.0.0 build
> webpack

assets by status 557 KiB [cached] 2 assets
assets by path . 2.93 KiB
  asset main.e56f5b8e482d3cd78a12.js 2.57 KiB [emitted] [immutable] (name: main)
  asset index.html 370 bytes [emitted] [compared for emit]
Entrypoint main 560 KiB = runtime.ec56a5d38c867b9d7078.js 7.62 KiB vendors.2f7016197c30de416000.js 550 KiB main.e56f5b8e482d3cd78a12.js 2.57 KiB
runtime modules 3.66 KiB 8 modules
cacheable modules 532 KiB
  ./src/index.js 399 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
  ./src/print.js 67 bytes [built] [code generated]
webpack 5.82.1 compiled successfully in 249 ms

npm run build

> webpack-02-start@1.0.0 build
> webpack

assets by status 560 KiB [cached] 3 assets
asset index.html 370 bytes [compared for emit]
Entrypoint main 560 KiB = runtime.ec56a5d38c867b9d7078.js 7.62 KiB vendors.2f7016197c30de416000.js 550 KiB main.e56f5b8e482d3cd78a12.js 2.57 KiB
runtime modules 3.66 KiB 8 modules
cacheable modules 532 KiB
  ./src/index.js 399 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
  ./src/print.js 67 bytes [built] [code generated]
webpack 5.82.1 compiled successfully in 242 ms

webpack.config.js

import _ from 'lodash';
//import Print from './print';
import Print from './print';

function component() {
   const element = document.createElement('div');

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  //element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.onclick = Print.bind(null, 'Hello webpack!');
  
  return element;
}

document.body.appendChild(component());

npm run build

npm run build

> webpack-02-start@1.0.0 build
> webpack

assets by status 557 KiB [cached] 2 assets
assets by path . 2.92 KiB
  asset main.d7d7819fb0075a155a2e.js 2.56 KiB [emitted] [immutable] (name: main)
  asset index.html 370 bytes [emitted] [compared for emit]
Entrypoint main 560 KiB = runtime.ec56a5d38c867b9d7078.js 7.62 KiB vendors.2f7016197c30de416000.js 550 KiB main.d7d7819fb0075a155a2e.js 2.56 KiB
runtime modules 3.66 KiB 8 modules
cacheable modules 532 KiB
  ./src/index.js 436 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
  ./src/print.js 67 bytes [built] [code generated]
webpack 5.82.1 compiled successfully in 250 ms