web-dev-qa-db-fra.com

Comment faire en sorte que Webpack utilise un suffixe qui élimine le cache?

Avant Webpack, je me basais toujours sur le modèle suivant pour "contournement de cache":

<script src="foo.js?cacheBust=12345" />

où 12345 était un jeton généré par le serveur pour chaque construction (il pourrait s'agir d'un hachage Git, bien que dans mon cas ce ne soit pas le cas).

Avec Webpack, j'ai maintenant deux fichiers: build.js et chunk.1.js. Puisque j'apporte le premier avec une balise de script normale, je peux utiliser le modèle ci-dessus:

<script src="build.js?cacheBust=12345" />

Cependant, à ce stade, build.js va chercher chunk.1.js et n'inclut pas le suffixe anti-cache.

J'aimerais que Webpack ajoute automatiquement le ?cacheBust=12345, mais je ne connais pas la partie 12345 au moment de la construction, je ne peux donc pas l'inclure dans mon webpack.config. Au lieu de cela, je dois attendre que la page HTML soit évaluée, puis le jeton est récupéré du serveur.

Ma question est donc la suivante: existe-t-il un moyen pour Webpack d’examiner le paramètre utilisé pour extraire le fichier initial (par exemple, ?cacheBust=12345) et d’ajouter ce même paramètre lors de la récupération d’autres fichiers?

javascriptwebpackbrowser-cache
14
machineghost

Vous pouvez simplement faire cela 

output: {
    filename: '[name].js?t=' + new Date().getTime(),
    chunkFilename: '[name]-chunk.js?t=' + new Date().getTime(),
    publicPath: './',
    path: path.resolve(__dirname, 'deploymentPackage')
}
9
VizardCrawler

Si vous souhaitez réaliser le contournement de la mémoire cache de "manière webpack":

1. Nom de hachage des fichiers de sortie

Modifier les noms de fichiers de sortie en noms générés par hachage (en phase de construction)

output: {
    path: '/',
    filename: '[hash].js',
    chunkFilename: '[chunkhash].js',
},

À partir de ce moment, vos foo.js et chunk.1.js seront appelés comme e883ce503b831d4dde09.js et f900ab84da3ad9bd39cc.js. Il est à noter que la génération de ces fichiers est souvent liée à l’obtention d’une valeur de production et de temps trop élevée pour mettre à jour cacheBust.

2. Comment inclure des noms de fichiers inconnus?

Depuis lors, votre fichier foo.js - main est nommé de manière inconnue. Pour extraire ce nom de fichier, vous pouvez utiliser AssetsPlugin 

const AssetsPlugin = require('assets-webpack-plugin');
const assetsPluginInstance = new AssetsPlugin();

et ajoutez ce plugin à webpack.config.js

plugins: [
    assetsPluginInstance
]

Dans le fichier webpack-assets.json, vous devriez voir quelque chose comme:

{
    "main": {
        "js": "/e883ce503b831d4dde09.js"
    }
}

Vous pouvez utiliser ce fichier pour pointer vers le fichier .js principal. Pour plus de détails, lisez cette réponse _ 

3. Temps de bénéfice

Je suppose que si vous créez une application en raison de la modification du fichier chunk.2.js, vous modifiez le chemin des fichiers de

- build.js?cacheBust=12345
- chunk.1.js?cacheBust=12345
- chunk.2.js?cacheBust=12345
- chunk.2.js?cacheBust=12345

aux nouveaux

- build.js?cacheBust=12346   // modified referation to chunk.2.js file
- chunk.1.js?cacheBust=12346
- chunk.2.js?cacheBust=12346 // modified
- chunk.2.js?cacheBust=12346

Si vous utilisez la solution ci-dessus, vous obtiendrez détermination gratuite du cache. Maintenant, les filles s'appelleront comme 

(production précédente)

- e883ce503b831d4dde09.js
- f900ab84da3ad9bd39cc.js
- 5015cc82c7831915903f.js
- 8b6de52a46dd942a63a7.js

(nouvelle production)

- c56322911935a8c9af13.js // modified referation to chunk.2.js file
- f900ab84da3ad9bd39cc.js
- cd2229826373edd7f3bc.js // modified
- 8b6de52a46dd942a63a7.js

Maintenant, les noms seulementmain file et chunk.2.js sont modifiés et vous obtiendrez cela gratuitement à l'aide de la méthode webpack.

Pour en savoir plus sur la mise en cache à long terme, cliquez ici https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31

36
Everettss

Vous pouvez utiliser HtmlWebpackPlugin

Description de webpack.js.org/plugins/html-webpack-plugin :

Le plugin ... simplifie la création de fichiers HTML pour servir vos ensembles de packs Webpack. Ceci est particulièrement utile pour les ensembles de packs Webpack qui incluent un hachage dans le nom du fichier qui modifie chaque compilation ...

Partie de mon webpack.config.js:

// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');
// ...
module.exports = {
   // ...
   plugins: [
      new HtmlWebpackPlugin({
         template: './assets/index.html',
         hash: true,
      }),
      // ...
   ]
};

Si hash: true, ajoutez ensuite un hachage de compilation webpack unique à tous les scripts et fichiers CSS inclus. Ceci est utile pour contourner le cache.

Plus d'informations sur HtmlWebpackPlugin options sur github.com/jantimon/html-webpack-plugin

Grâce à cette option, j'ai obtenu un fichier HTML de sortie avec:

<!DOCTYPE html>
<html>
   <head>
      <!-- ... rest of my head code ... -->
      <link href="./css/styles.css?f42fdf96e2f7f678f9da" rel="stylesheet">
   </head>
   <body>
      <!-- ... rest of my body code ... -->
      <script type="text/javascript" src="./js/index.bundle.js?f42fdf96e2f7f678f9da"></script>
   </body>
</html>

Code source de mon projet: github.com/cichy380/html-starter-bs4-webpack

1
Cichy