Webpack : branchez-le – Perficient Blogs

Plugins Webpack

La dernière fois, nous avons commencé à créer des règles pour les types de fichiers, et parfois nous avons utilisé un chargeur et parfois nous avons référencé un plugin pour effectuer des fonctions spéciales. Nous avons déjà utilisé le MiniCssExtractPlugin pour travailler avec des fichiers de type Sass et du CSS simple pour produire un seul fichier CSS. Ensuite, nous examinerons certains cas d’utilisation courants où les plugins nous aideront soit lors des tests de développement, soit dans notre sortie finale pour la production.

Garder les choses propres

Chaque fois que nous exécutons un build webpack, nous créons de nouveaux fichiers dans notre répertoire « dist », mais nous ne voulons utiliser que les derniers fichiers construits. Webpack 5 a une méthode intégrée pour cela appelée « clean » qui est placée dans la zone « output » de notre fichier de configuration :

output: {
  filename: "https://blogs.perficient.com/2023/01/03/webpack-plug-it-in/bundle.js",
  path: path.resolve(__dirname, './dist/'),
  clean: true
},

Cela supprimera tout dans « ./dist/ » et le remplacera par de nouveaux fichiers lors de l’exécution d’une construction. C’est très bien si vous utilisez Webpack 5, mais sinon, nous avons besoin d’un plugin appelé propre-webpack-plugin.

Comme d’habitude, nous commençons par l’installer en utilisant npm et puisque nous en aurons besoin lors du développement en utilisant le –save-dev drapeau.

npm install clean-webpack-plugin --save-dev

Maintenant, nous l’ajoutons comme exigence en haut de notre fichier de configuration :

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

Notez que nous utilisons les accolades lorsque nous lui donnons un nom de référence car nous demandons la classe appelée « CleanWebpackPlugin » trouvée dans le module js. Vous pouvez toujours ouvrir le dossier créé dans node_modules et jetez un coup d’œil à ce que vous avez installé afin que ce ne soit pas une situation de boîte noire !

capture d’écran de clean-webpack-plugin.js montrant la classe que nous utilisons

Enfin, nous devons ajouter ceci à notre tableau de plugins dans notre fichier de configuration :

plugins:[
    new CleanWebpackPlugin()
]

Pour l’instant, aucune option n’est définie entre parenthèses, c’est-à-dire : new CleanWebpackPlugin({ options go here}). Mais il existe des moyens d’inclure d’autres dossiers en plus de « dist » ou de conserver certains fichiers.

Plus peut être lu dans la documentation https://www.npmjs.com/package/clean-webpack-plugin

Soyez unique

Très souvent, lorsque nous déployons un nouveau code, nos fichiers JS et CSS ne sont pas immédiatement récupérés par les navigateurs avec nos modifications dues à la mise en cache. Presque à chaque fois lors d’un déploiement, le client ne voit pas le travail effectué à moins d’avoir reçu des instructions spécifiques sur la façon de recharger en dur, d’effacer le cache ou d’utiliser une autre méthode pour extraire cette dernière version. Très bien si vous pouvez le dire à quelqu’un, mais pour le public, vous ne pouvez pas. Afin d’être sûrs de ce qui doit être chargé, nous pouvons créer des noms de fichiers uniques pour nos actifs.

Utilisation de ContentHash

Webpack a une valeur intégrée appelée [contenthash]. Cela peut être ajouté à n’importe quel fichier de sortie nommé afin de rendre ce nom de fichier unique pour que le navigateur sache qu’il doit être téléchargé.

Si nous voulions notre bundle.js fichier dans notre sortie pour utiliser à la place un nom unique, nous placerions le [contenthash] valeur n’importe où dans le nom :

output: {
    filename: 'bundle-[contenthash].js',                    
    path: path.resolve(__dirname, './dist/')
}

Dans le cas ci-dessus, le fichier JS de sortie serait quelque chose comme « bundle-53daj335232d.js »

La même chose peut être faite pour notre CSS dans le MiniCSSExtractPlugin que nous avons utilisé précédemment.

 plugins: [
     new MiniCssExtractPlugin({
         filename: 'styles-[contenthash].css'
     })
]

C’est génial pour le contournement du cache, mais maintenant nous avons un problème. Comment le navigateur saura-t-il quel nom de fichier utiliser dans nos balises

Source link