1、指纹策略

浏览器缓存机制：
第一次进入页面，会查看是否有换缓存，如果无知进行请求。并缓存放回回来的页面。

第二次进入页面，会直接显示已缓存的页面。

问题：文件已经上传的服务器了，但是页面并没有更新。

这个时候需要使用指纹策略。
1、hash:当文件内容发生变化时，打包的文件名才会改变。作用范围最大，作用于整个工程。
使用方法如下：

image.png

image.png

问题：假如我们是多入口文件，如果项目中有一个js文件进行了修改，那么整个项目的js文件名都会被修改，这就不合理。

image.png

chunkhash:只打包修改文件内容有改变的文件。影响访问时一个chunks。

image.png

问题：假如我们js文件中引用了css文件，使用的是chunkhash，当css文件发生变化时，也会改变引入的js文件的hash变化。这就不合理。

contenthash:自身内容更新，hash才会更新。

image.png

cdn就是分布式服务器。
访问时采用就近原则，例如：上海用户访问就采用上海节点，深证用户访问就采用深圳节点

2、如何打包配置多页面

1、entry配置：

  entry: {
    index: "./src/index.js",
    list: "./src/list.js",
  },

2、plugins配置：
默认配置：

plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      chunks: ["index"],
    }),
    new htmlWebpackPlugin({
      template: "./src/list.html",
      filename: "list.html",
      chunks: ["list"],
    }),
  ],

动态配置：
1、需要规定好所有多页面文件下的目录如下：都有index.js和index.html文件。

image.png

2、npm isntall glob -D 安装glob。可以帮助我们用通配的方式找到符合目录。
3、再webpack.config.js中代码编写。

const setMpa = () => {
  const entry = {};
  const htmlwebpackplugins = [];

    //找到符合页面的文件
  const entryFiles = glob.sync(path.join(__dirname, "./src/*/index.js"));

  entryFiles.map((item, index) => {
    const entryFile = entryFiles[index];
    const match = entryFile.match(/src\/(.*)\/index\.js$/);
    const pageName = match[1]; //  获取到key
    entry[pageName] = entryFile;
    htmlwebpackplugins.push(
      new htmlWebpackPlugin({
        template: `./src/${pageName}/index.html`,
        filename: `${pageName}.html`,
        chunks: [pageName],
      })
    );
  });

  return {
    entry,
    htmlwebpackplugins,
  };
};
const { entry, htmlwebpackplugins } = setMpa();

entry配置：

image.png

plugin配置：

image.png