从零开始了解webpack的指纹策略，来优化你的项目。

阅读了本文你可以学习到：

• 指纹策略有几种
• 指纹策略的使用场景、使用方法
• 什么时候要选用何种指纹策略更合适

构建项目

关于搭建一个webpack的环境，大家请参考我的另一篇文章webpack —— 搭建一个webpack的学习环境，下面的过程中，我就默认大家搭建完毕。本文也会只用这个模板来学习。

├─dist/                   //webpack build之后生成的目录
├─src/
    ├─index.js            //示例代码
├─.browserslistrc         //浏览器集合的默认配置文件
├─.npmrc                  //npm 配置文件
├─package-lock.json
├─package.json
├─webpack.config.js       //webpack默认的配置文件
复制代码

在上面模板的基础上稍作修改：

• 新建src/css/index.css文件，并且在index.js中引入

  //index.css文件
  body{
      background-color: aqua;
      font-size:40px;
  }
  
  
  //index.js文件
  import './css/index.css';
  console.log ('Hello World!');
  复制代码

• 集成css-loader、style-loader、mini-css-extract-plugin支持处理.css文件,集成clean-webpack-plugin每次build之前先清除dist。

  在我之前的文章有写过，不做赘述。

指纹策略的类型及其详细介绍

webpack的指纹策略有三种：hash、chunkhash、contenthash，最主要的区别就是每种hash影响范围的不同。

测试webpack的指纹策略，我们用多入口来测试，效果会更明显

• 继续在src下面新建list.js、detail.js文件,

  //list.js文件中
  console.log("list");
  
  //detail.js文件中
  console.log("detail");
  复制代码

• 修改webpack.config.js文件

  const path = require ('path');
  const {CleanWebpackPlugin} = require ('clean-webpack-plugin');
  const minicssextractplugin = require ('mini-css-extract-plugin');
  
  module.exports = {
   entry: {
     index: './src/index.js',
     list: './src/list.js',
     detail: './src/detail.js',
   },
   mode: 'development',
   output: {
     path: path.resolve (__dirname, './dist'),
     filename: '[name].js',
   },
   module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader', minicssextractplugin.loader, 'css-loader'],
       },
     ],
   },
   plugins: [
     new CleanWebpackPlugin (),
     new minicssextractplugin ({
       filename: 'css/[name].css',
     }),
   ],
  };
  复制代码

运行npm run build打包命令，成功打包出文件

hash

项目级别的hash，单个文件发生改变时会影响整个项目的hash值
复制代码

• 修改webpack.config.js文件,生成的文件名使用hash。

  const path = require ('path');
  const {CleanWebpackPlugin} = require ('clean-webpack-plugin');
  const minicssextractplugin = require ('mini-css-extract-plugin');
  
  module.exports = {
    ...,
    output: {
      path: path.resolve (__dirname, './dist'),
      filename: '[name]-[hash:6].js',//hash截取6位
    },
    plugins: [
      new CleanWebpackPlugin (),
      new minicssextractplugin ({
        filename: 'css/[name]-[hash:6].css',
      }),
    ],
    ...,
  };
  复制代码

• 运行npm run build打包，看清楚现在文件的hash值。

  

• 修改src/css/index.css文件。

  //未修改：
  body{
      background-color: aqua;
      font-size: 40px;
  }
  
  //修改后：
  body{
      background-color: aqua;
      font-size: 1200px;
  }
  复制代码

• 再次运行打包

  

从上面的实验过程我们可以看到，index.css文件只是在index.js文件中引入，却引发了所有文件的hash值得改变。

chunkhash

chunk组级别的的hash，文件改变时只会影响当前chunk组的hash值
复制代码

• 修改webpack.config.js文件,生成的文件名使用chunkhash。

      const path = require ('path');
      const {CleanWebpackPlugin} = require ('clean-webpack-plugin');
      const minicssextractplugin = require ('mini-css-extract-plugin');
  
      module.exports = {
        ...,
        output: {
          path: path.resolve (__dirname, './dist'),
          filename: '[name]-[chunkhash].js',
        },
        plugins: [
          new CleanWebpackPlugin (),
          new minicssextractplugin ({
            filename: 'css/[name]-[chunkhash].css',
          }),
        ],
        ...,
      };
  复制代码

• 运行npm run build打包，看清楚现在文件的hash值。

  

• 修改src/css/index.css文件。

  //未修改：
  body{
      background-color: aqua;
      font-size: 1200px;
  }
  
  //修改后：
  body{
      background-color: aqua;
      font-size: 20px;
  }
  复制代码

• 再次运行打包

  

通过对比我们可以发现，当我们使用了chunkhash，修改了index.css文件，只会让这个chunk组的hash值发生改变，而不会让其他文件的chunkhash发生改变，如此我们可以利用这个机制，结合浏览器合理使用缓存，达到优化的目的

contenthash

文件级别的hash,单个文件发生改变，只会影响此文件的hash值。
复制代码

• 修改webpack.config.js文件,生成的文件名使用contenthash。

  const path = require ('path');
  const {CleanWebpackPlugin} = require ('clean-webpack-plugin');
  const minicssextractplugin = require ('mini-css-extract-plugin');
  
  module.exports = {
    ...,
    output: {
      path: path.resolve (__dirname, './dist'),
      filename: '[name]-[contenthash].js',
    },
    plugins: [
      new CleanWebpackPlugin (),
      new minicssextractplugin ({
        filename: 'css/[name]-[contenthash].css',
      }),
    ],
    ...,
  };
  复制代码

• 运行npm run build打包，看清楚现在文件的hash值。

  

• 修改src/css/index.css文件。

  //未修改：
  body{
      background-color: aqua;
      font-size: 41px;
  }
  
  //修改后：
  body{
      background-color: aqua;
      font-size: 10px;
  }
  复制代码

• 再次运行打包

  

通过对比我们可以发现，我们使用了contenthash,修改了index.css文件之后，只有此文件的hash改变了。