Comment regrouper séparément les scripts des fournisseurs et les exiger selon les besoins avec Webpack?

J'essaie de faire quelque chose qui, à mon avis, devrait être possible, mais je ne comprends vraiment pas comment le faire uniquement à partir de la documentation du Webpack.

J'écris une bibliothèque JavaScript avec plusieurs modules qui peuvent ou non dépendre les uns des autres. En plus de cela, jQuery est utilisé par tous les modules et certains d'entre eux peuvent avoir besoin de plugins jQuery. Cette bibliothèque sera ensuite utilisée sur plusieurs sites Web différents qui peuvent nécessiter certains ou tous les modules.

Définir les dépendances entre mes modules était très facile, mais définir leurs dépendances tierces semble être plus difficile que je ne le pensais.

Ce que je voudrais réaliser : pour chaque application, je souhaite avoir deux fichiers bundle, l'un avec les dépendances tierces nécessaires et l'autre avec les modules nécessaires de ma bibliothèque.

Exemple : imaginons que ma bibliothèque comporte les modules suivants:

• a (nécessite: jquery, jquery.plugin1)
• b (nécessite: jquery, a)
• c (nécessite: jquery, jquery.ui, a, b)
• d (nécessite: jquery, jquery.plugin2, a)

Et j'ai une application (voyez-la comme un fichier d'entrée unique) qui nécessite les modules a, b et c. Webpack dans ce cas doit générer les fichiers suivants:

• bundle fournisseur : avec jquery, jquery.plugin1 et jquery.ui;
• ensemble de sites Web : avec les modules a, b et c;

En fin de compte, je préférerais avoir jQuery en tant que global afin de ne pas avoir besoin de l'exiger sur chaque fichier (je pourrais l'exiger uniquement sur le fichier principal, par exemple). Et les plugins jQuery ne feraient qu'étendre le $ global au cas où ils seraient nécessaires (ce n'est pas un problème s'ils sont disponibles pour d'autres modules qui n'en ont pas besoin).

En supposant que cela soit possible, quel serait un exemple de fichier de configuration Webpack dans ce cas? J'ai essayé plusieurs combinaisons de chargeurs, d'externals et de plugins sur mon fichier de configuration, mais je ne comprends pas vraiment ce qu'ils font et lesquels dois-je utiliser. Je vous remercie!

dans mon fichier webpack.config.js (Version 1,2,3), j'ai

function isExternal(module) {
  var context = module.context;

  if (typeof context !== 'string') {
    return false;
  }

  return context.indexOf('node_modules') !== -1;
}

dans mon tableau de plugins

plugins: [
  new CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function(module) {
      return isExternal(module);
    }
  }),
  // Other plugins
]

Maintenant, j'ai un fichier qui n'ajoute que des bibliothèques tierces à un fichier selon les besoins.

Si vous souhaitez obtenir plus de précision lorsque vous séparez vos fournisseurs et vos fichiers de point d'entrée:

plugins: [
  new CommonsChunkPlugin({
    name: 'common',
    minChunks: function(module, count) {
      return !isExternal(module) && count >= 2; // adjustable
    }
  }),
  new CommonsChunkPlugin({
    name: 'vendors',
    chunks: ['common'],
    // or if you have an key value object for your entries
    // chunks: Object.keys(entry).concat('common')
    minChunks: function(module) {
      return isExternal(module);
    }
  })
]

Notez que l'ordre des plugins compte beaucoup.

De plus, cela va changer dans la version 4. Quand c'est officiel, je mets à jour cette réponse.

Mise à jour: changement de recherche d'indexOf pour les utilisateurs de Windows

Je ne sais pas si je comprends parfaitement votre problème, mais comme j'ai eu un problème similaire récemment, je vais essayer de vous aider.

Bundle fournisseur.

Vous devriez utiliser CommonsChunkPlugin pour cela. dans la configuration, vous spécifiez le nom du bloc (par exemple vendor) et le nom du fichier qui sera généré (vendor.js ).

new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),

Maintenant, partie importante, vous devez maintenant spécifier ce que cela signifie vendorbibliothèque et vous le faites dans une section d'entrée. Un élément de plus dans la liste d'entrée avec le même nom que le nom du bloc nouvellement déclaré (c'est-à-dire «vendeur» dans ce cas). La valeur de cette entrée doit être la liste de tous les modules que vous souhaitez passer à vendorregrouper. dans votre cas, cela devrait ressembler à quelque chose comme:

entry: {
    app: 'entry.js',
    vendor: ['jquery', 'jquery.plugin1']
}

JQuery comme global

J'ai eu le même problème et l'a résolu avec providePlugin . ici, vous ne définissez pas un objet global mais une sorte de raccourcis vers les modules. c'est à dire que vous pouvez le configurer comme ça:

new webpack.ProvidePlugin({
    $: "jquery"
})

Et maintenant, vous pouvez simplement utiliser $ n'importe où dans votre code - webpack le convertira automatiquement en

require('jquery')

J'espère que cela a aidé. vous pouvez également consulter mon fichier de configuration webpack qui est ici

J'adore webpack, mais je suis d'accord que la documentation n'est pas la plus belle du monde ... mais bon ... les gens disaient la même chose à propos de la documentation Angular au début :)

Éditer:

Pour avoir des segments de fournisseur spécifiques aux points d'entrée, utilisez simplement CommonsChunkPlugins plusieurs fois:

new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity),
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity),

puis déclarez différentes bibliothèques extenrales pour différents fichiers:

entry: {
    page1: ['entry.js'],
    page2: ['entry2.js'],
    "vendor-page1": [
        'lodash'
    ],
    "vendor-page2": [
        'jquery'
    ]
},

Si certaines bibliothèques se chevauchent (et pour la plupart d'entre elles) entre les points d'entrée, vous pouvez les extraire dans un fichier commun en utilisant le même plugin avec une configuration différente. Voyez cet exemple.

Si vous souhaitez regrouper automatiquement vos scripts séparément de ceux des fournisseurs:

var webpack = require('webpack'),
    pkg     = require('./package.json'),  //loads npm config file
    html    = require('html-webpack-plugin');

module.exports = {
  context : __dirname + '/app',
  entry   : {
    app     : __dirname + '/app/index.js',
    vendor  : Object.keys(pkg.dependencies) //get npm vendors deps from config
  },
  output  : {
    path      : __dirname + '/dist',
    filename  : 'app.min-[hash:6].js'
  },
  plugins: [
    //Finally add this line to bundle the vendor code separately
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min-[hash:6].js'),
    new html({template : __dirname + '/app/index.html'})
  ]
};

Vous pouvez en savoir plus sur cette fonctionnalité dans la documentation officielle .

Je ne sais pas non plus si je comprends parfaitement votre cas, mais voici un extrait de configuration pour créer des blocs de fournisseur distincts pour chacun de vos ensembles:

entry: {
  bundle1: './build/bundles/bundle1.js',
  bundle2: './build/bundles/bundle2.js',
  'vendor-bundle1': [
    'react',
    'react-router'
  ],
  'vendor-bundle2': [
    'react',
    'react-router',
    'flummox',
    'immutable'
  ]
},

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle1',
    chunks: ['bundle1'],
    filename: 'vendor-bundle1.js',
    minChunks: Infinity
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle2',
    chunks: ['bundle2'],
    filename: 'vendor-bundle2-whatever.js',
    minChunks: Infinity
  }),
]

Et lien vers la CommonsChunkPlugindocumentation: http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin