Comment écrire un plugin Webpack qui ajoute des modules au bundle à la volée à partir d'autres modules?

Question

J'ai un problème avec l'écriture d'un Webpack plugin pour un service de traduction.

L'objectif est de:

1. Obtenir des noms (et le code source) de tous les modules requis lors de la compilation. J'ai besoin d'être en mesure d'analyser le code source fourni spécial t() utilisation de fonction, mais je veux analyser uniquement les modules qui seront inclus dans le bundle (qui, en fonction de configuration de la compilation, peut être un sous-ensemble de tous les modules de projets).
2. Basé sur l'réunis modules, je veux créer des modules supplémentaires (avec la traduction) à la volée et de les ajouter à l'ensemble. Ces modules doivent être en mesure d'importer leurs propres dépendances.

Une condition supplémentaire est que le Webpack du code de fractionnement doit travailler avec les modules créés à la volée (je veux extraire les fichiers séparés – par exemple, bundle.[lang].js). Aussi, ce qui est peut-être hors de la portée de cette question, je dois faire de ces morceaux, avec des traductions en option (si vous n'avez pas à charger toutes les langues, mais un seul).

Plus de détails peuvent être trouvés dans https://github.com/ckeditor/ckeditor5/issues/387.

J'ai essayé plusieurs solutions, mais Webpack 2 la documentation n'est pas très utile. Je peux obtenir tous les modules par l'écoute de la résolution de module crochets (before-resolve), mais je ne sais pas quand toutes les dépendances sont résolues et je ne sais pas si je peux ajouter d'autres modules par la suite (et la façon de le faire – est - addEntry ok et quand je peux l'utiliser?).

Je pensais aussi sur la connexion Webpack plugin et Webpack chargeur (parce que la fonction dont j'ai besoin est assez similaire à Webpack style-loader), mais à partir du plugin niveau je ne peux qu'ajouter un chemin d'accès pour le chargeur, pas le chargeur lui-même, donc je ne peux pas passer à la configuration de l'objet en tant que paramètre – ai-je tort?

PS. J'utilise Webpack 2. Si les exigences sembler étrange pour vous, consultez https://github.com/ckeditor/ckeditor5/issues/387 :).

Answer 1

C'est vraiment une question complexe, mais je peux vous montrer comment vous pouvez en ajouter d'autres dépendances à des modules spécifiques comme si ceux qui ont été nécessaires à partir de ce module. Cela garantit que vos modules seront dans le bon morceaux et sera également supprimé si le module parent est supprimé de l'ensemble.

const CommonJsRequireDependency = require("webpack/lib/dependencies/CommonJsRequireDependency")

class MyPlugin {
  apply(compiler) {
    compiler.plugin("compilation", compilation => {
      compilation.plugin("succeed-module", module => {
        // this will be called for every successfully built module, but before it's parsed and
        // its dependencies are built. The built source is available as module._source.source()
        // and you can add additional dependencies like so:
        module.dependencies.push(new CommonJsRequireDependency("my-dependency", null))
      }
    }
  }
}

Ce n'est qu'une partie d'elle. Vous aurez probablement aussi besoin d'écrire votre propre chargeur de réellement générer les traductions (vous pouvez remplacer my-dependency - dessus avec my-loader!path/to/module pour l'appeler tout de suite) et une étape après les morceaux sont créés pour peut-être les extraire dans un nouvel actif et de charge car ils ne sont pas réellement required n'importe où.