Webpackда макетга хеш билан скрипт бандллари

Одатда лойихани тўплашда биз бандл номлари хешни ўз ичига олишини истаймиз. Бунга биз браузер томонидан файлларни кешлаш муаммосini хал қилиш учун зарур.

Шу сабабли Webpack автоматник тарзда хешни ўз ичига олган номлар билан бандллари улаши қулай. Келиб текширамиз. Фарз қилайлик, бизда куйидаги созламалар мавжуд:

webpack.config.jsexport default {
  context: path.resolve( 'src'),
  entry: {
    test1: './test1.js',
    test2: './test2.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve('dist'),
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

Тўплашдан сўнг макет файлига бизнинг хеш билан бандлларимиз уланади:

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <script defer src="test1.4173b379c6d6ff439604.js"></script>
    <script defer src="test2.72be8754d7c4cb0ece00.js"></script>
  </head>
  <body>
    
  </body>
</html>

Бу ҳолда лойиха файллари ўзгартирилганда ва қайта тўплашда Webpack автоматник тарзда хешларни ўзгартиради ва макет файлига ўзгартиришлар киритади. Агар лойиха файллари ўзгартирилмаган бўлса, у ҳолда хеш ҳам ўзгармайди.