Comment faire un polyfill automatisé dans webpack 5 ?

L'outil webpack est couramment utilisé en JavaScript depuis l'explosion de l'utilisation du langage, avec la sortie de NodeJS et des frameworks JavaScript importants. Le nombre de fichiers JavaScript qui composent une application ou un site internet peut être énorme. Webpack permet de regrouper ces fichiers, ainsi que les différents assets en des modules uniques. Le temps de chargement des applications est alors réduit. Depuis la version 5, les polyfills ne sont plus gérés automatiquement par webpack, vous devez les configurer vous-même.

La multiplication du nombre de plugins à prendre en charge par webpack a conduit les développeurs à ne plus prendre en charge les polyfills automatisés directement dans la configuration. C'est à l'utilisateur de les paramétrer directement. Pour effectuer cette configuration, vous devez modifier le fichier de configuration de webpack. Il est situé dans votre projet, dans le sous-dossier "node_modules/react-scripts/config" et se nomme "webpack.config.js". La section à modifier est dans "resolve" puis "fallback". Vous devez préciser ici quel polyfill vous souhaitez utiliser. Par exemple, pour utiliser le polyfill "crypto", vous devez l'indiquer dans cette section.

resolve: {
    fallback: {
        "crypto": require.resolve("crypto-browserify")
    }
}

Vous pourrez maintenant utiliser le polyfill "crypto" lorsque vous travaillerez avec webpack. Vous devez effectuer cette opération pour chacun des polyfills dont vous avez besoin.

Une autre solution existe si vous ne souhaitez pas effectuer cette configuration vous-même. Des développeurs ont créé un module qui ajoute la gestion des polyfills dans webpack, pour les versions 5 et supérieures. Ce module s'appelle "node-polyfill-webpack-plugin". Pour l'utiliser, vous devez d'abord l'installer en utilisant NPM.

npm install node-polyfill-webpack-plugin

Vous devez ensuite intégrer le plugin dans le fichier de configuration de webpack. Ajoutez le code suivant, et les polyfills pourront être utilisés avec webpack.

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Autres règles...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

JavaScript