Что такое hash, chunkhash и contenthash в webpack

Webpack

Те, кто знает других, мудры, те, кто знает себя, ясны, те, кто побеждает других, сильны, и те, кто побеждает себя, сильны. - Лао-цзы

Введение

существуетwebpackесть триhashМожно настроить,hash,chunkhash,contenthashОни неверны и могут быть нацелены на разные конфигурации, премьер-министру нужно разобраться с этими тремяhashРазница, в каком сценарии, какой из них подходит для использования.

hashВсе файлы имеют одинаковое значение хеш-функции.Пока измененное содержимое несовместимо с предыдущим, все значения хеш-функции будут изменены, что не делает кэширование осмысленным.

chunkhashкогда их несколькоchunk, образуя несколькоbundle, если есть только одинchunkс однимbundleСодержание изменилось, другоеbundleизhashизменится, ведь все люди общиеhash,В настоящее времяchunkhashЭффект выходит. Он основан на разных входных файлах(Entry)Выполните синтаксический анализ файла зависимостей и создайте соответствующийchunk, создайте соответствующийхэш-значение.

contenthashПри упаковке мы будем вjsимпортировать вcssфайл, потому что это один и тот же файл ввода, если я только изменюjsполучил код, но егоcssИзвлечь и сгенерироватьcssвремя файлаhashтакже изменится. В настоящее времяcontenthashЭффект выходит.

Следующий код непосредственно проверяет приведенную выше гипотезу.

Простая конфигурация веб-пакета

Мы просто создадим тот, который сейчас компилируетсяjsизwebpackконфигурации, шаги следующие:

  1. Создайте пустой файл и откройте его в текущей папкеbash or cmd.
  2. npm init -yгенерироватьpackage.json.
  3. если вы установилиcnpm or yarnпросто выполнитьcnpm i webpack webpack-cli -D, Установитьwebpackупаковка.
  4. Создайтеsrc,существуетsrcСоздано внутриchunk0.js,chunk1.js,common.js,index.js,style.cssи написать внутренний код
  5. Создан в корневом каталоге проектаwebpack.config.js
  6. прямо вcmdвбегаетwebpack

Каталог файлов выглядит следующим образом:

webpack contenthash hash chunkhash

Ниже приведен кодchunk0.js

export default function add (a, b) {
  return a + b;
};

chunk1.js

export default function flow () {
  return 'flow';
};

common.js

export default function commonJs () {
  return 'commonJs';
};

index.js

import add from './chunk0.js';
import commonJs from './common';
console.log(add(1, 2));
console.log(commonJs());

style.css

body {
  background: #000;
}

webpack.config.js

module.exports = {
  mode: "production", // 如果不添加就会警告
  entry: {
    index: "./src/index.js", // 一个入口文件
    chunk1: "./src/chunk1.js" // 两一个入口文件
  },
  output: {
    filename: "[name].[hash].js" // 出口文件
  }
}

hash

мы работаем напрямуюwebpack, результат операции показан на следующем рисунке:

Хеш только один, а хеш всех файлов одинаковый:

webpack contenthash hash chunkhash

Если мы изменим модификациюchunk1.jsкод в:

export default function flow () {
  return 'flow1'; // flow => folw1
};

Снова запустите webpack и обнаружите, что все хеши изменились, как показано на следующем рисунке:

webpack contenthash hash chunkhash
webpack contenthash hash chunkhash

Сравнение найдено, что их хэш не одинаково, и на этот раз, если вы хотите изменитьchunk1.js, index.js не меняется, надо использовать chunkhash.

chunkhash

  • Во-первых, положимwebpack.config.jsвнести некоторые изменения
module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.js",
    chunk1: "./src/chunk1.js"
  },
  output: {
    filename: "[name].[chunkhash].js" // hash => chunkhash
  }
}
  • На втором шаге запускаемwebpack

webpack contenthash hash chunkhash
Судя по картинке выше, дваchunkизhashНе то же самое.

  • Третья часть, которую мы модифицируемchunk1.js 
export default function flow () {
  return 'flow11111'; // flow1 => flow11111
};
  • бежать сноваwebpack

webpack contenthash hash chunkhash

![webpack contenthash hash chunkhash](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/9/5/16d002e88c2071a3~tplv-t2oaga2asx-image.image)

По картинке мы видимchunk1.jsизhashизменение, иindex.jsизhashИзменений нет, мы достигли ожидаемого эффекта, а также лучше для нашего онлайн-кэша.

contenthash

Но когда мыjsФайл ссылается наcssфайл, если я его изменюcssсодержимое файла, мыcss, вы найдете все этоbundleизhashТакже происходят обновления. мы представляемcss, и кcssИзвлечь, сжать для созданияcssфайл, необходимо использоватьwebpackплагин, называемыйMiniCssExtractPlugin, Он может помочь мне извлечь css в файл css и сжать css.

  • Первым шагом является установкаcss-loader,mini-css-extract-pluginМешок
cnpm install css-loader mini-css-extract-plugin -D
  • Второй шаг к изменениюwebpack.config.jsследующим образом
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 新增
module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.js",
    chunk1: "./src/chunk1.js"
  },
  output: {
    filename: "[name].[chunkhash].js"
  },
  module: { // 新增
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          "css-loader"
        ]
      }
    ]
  },
  plugins: [ // 新增
    // 提取css插件
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].[chunkhash].css"
    })
  ]
};
  • Третий шаг — запустить webpack

webpack contenthash hash chunkhash

Вы можете увидеть кодindex.cssа такжеindex.jsизhashэто то же самое.

  • Четвертый шаг — изменить style.css.
html {
  font-size: 13px;
}
  • Шаг 5. Запустите веб-пакет

webpack contenthash hash chunkhash

webpack contenthash hash chunkhash

Сравнение двух сборокhash, обнаружил, что только модифицированныйstyle.cssфайл, импортируя егоindex.jsдействительно обновленhash, то необходимоcontenthashвступают в игру.

  • Шаг 6 Модификацияwebpack.config.jsи запустить вебпак
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 新增
module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.js",
    chunk1: "./src/chunk1.js"
  },
  output: {
    filename: "[name].[chunkhash].js"
  },
  module: { // 新增
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          "css-loader"
        ]
      }
    ]
  },
  plugins: [ // 新增
    // 提取css插件
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].[contenthash].css"
    })
  ]
};

webpack contenthash hash chunkhash
Видеть, что они хешируют напрямую, это другое.

  • Исправлятьcommon.js, запустить веб-пакет напрямую
export default function commonJs () {
  return 'commonJs1';
};

webpack contenthash hash chunkhash

webpack contenthash hash chunkhash

Видя, что хэш нашего файла css не изменился при изменении js.

Обратите внимание, что при использованииcontenthashЕсли вы измените файл js, хэш файла css не изменится, но если вы измените файл js, хэш файла css также изменится.

Суммировать

hash Все файлы имеют одинаковое значение hash; chunkhash анализирует зависимые файлы в соответствии с различными входными файлами (Entry), строит соответствующие фрагменты и генерирует соответствующие хэш-значения; Расчет contenthash связан с содержимым самого файла и в основном используется, когда css извлекает файлы css.

Ссылаться на

Интервью обязательно! 5 самых запутанных знаний в webpack

Категории