Webpack 4: присвоение имен файлам CSS

Когда дело доходит до именования файлов CSS, созданных с помощью MiniCssExtractPlugin, есть две разные рекомендации, как их называть:

Первый пример:

plugins: [
    new MiniCssExtractPlugin({
     filename: '[name].css',
     chunkFilename: '[id].css',
    }),
],

Второй пример:

plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contentHash].css',
    }),
  ],

Какой метод предпочтительнее и почему?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
87
1

Ответы 1

[contenthash] лучше, чем [hash]. Contenthash - это хэш, сгенерированный на основе содержимого файла, поэтому он изменится только в том случае, если вы внесли изменения в этот файл. Это помогает сэкономить деньги в целом (или даже лучше: «долгосрочное кеширование статического контента»).

Учитывая, что вы обновляете один из своих файлов и используете другие вещи, кроме Contenthash, пользователь не сможет увидеть никаких обновлений (необходимо удалить кэш). Contenthash - это лучшая и автоматическая версия выполнения:

app.js?build=1
vendor.css?build=1
main.css?build=1

TL; TR: подходит для кеширования, обновляется только при изменении содержимого, помогает долгосрочному кешированию и т. д.

Спасибо. Но когда webpack предлагает [chunkhash] и [contenthash], почему некоторые люди используют плагин webpack-md5-hash?

user1941537 10.08.2018 15:15

Потому что они могут не знать об этих двух вещах (chunkhash создается для каждого фрагмента). Этот плагин в основном такой же, как [hash].

PlayMa256 10.08.2018 15:17

Другие вопросы по теме