Wie kann ich Anbieterskripte separat bündeln und bei Bedarf mit Webpack anfordern?

Ich versuche etwas zu tun, von dem ich glaube, dass es möglich sein sollte, aber ich kann es wirklich nicht verstehen, nur aus der Webpack-Dokumentation.

Ich schreibe eine JavaScript-Bibliothek mit mehreren Modulen, die voneinander abhängen können oder nicht. Darüber hinaus wird jQuery von allen Modulen verwendet, und einige von ihnen benötigen möglicherweise jQuery-Plugins. Diese Bibliothek wird dann auf mehreren verschiedenen Websites verwendet, für die möglicherweise einige oder alle Module erforderlich sind.

Das Definieren der Abhängigkeiten zwischen meinen Modulen war sehr einfach, aber das Definieren der Abhängigkeiten von Drittanbietern scheint schwieriger zu sein, als ich erwartet hatte.

Was ich erreichen möchte : Für jede App möchte ich zwei Bundle-Dateien haben, eine mit den erforderlichen Abhängigkeiten von Drittanbietern und eine mit den erforderlichen Modulen aus meiner Bibliothek.

Beispiel : Stellen wir uns vor, meine Bibliothek enthält die folgenden Module:

• a (erfordert: jquery, jquery.plugin1)
• b (erfordert: jquery, a)
• c (erfordert: jquery, jquery.ui, a, b)
• d (erfordert: jquery, jquery.plugin2, a)

Und ich habe eine App (siehe sie als eindeutige Eintragsdatei), die die Module a, b und c benötigt. Webpack für diesen Fall sollte die folgenden Dateien generieren:

• Vendor Bundle : mit jquery, jquery.plugin1 und jquery.ui;
• Website-Bundle : mit Modulen a, b und c;

Am Ende würde ich es vorziehen, jQuery als global zu haben, damit ich es nicht für jede einzelne Datei benötigen muss (ich könnte es zum Beispiel nur für die Hauptdatei benötigen). Und jQuery-Plugins würden nur $ global erweitern, falls sie benötigt werden (es ist kein Problem, wenn sie anderen Modulen zur Verfügung stehen, die sie nicht benötigen).

Angenommen, dies ist möglich, was wäre ein Beispiel für eine Webpack-Konfigurationsdatei für diesen Fall? Ich habe verschiedene Kombinationen von Ladern, externen Geräten und Plugins in meiner Konfigurationsdatei ausprobiert, aber ich verstehe nicht wirklich, was sie tun und welche ich verwenden soll. Danke dir!

In meiner Datei webpack.config.js (Version 1,2,3) habe ich

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

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

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

in meinem Plugins-Array

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

Jetzt habe ich eine Datei, die nur nach Bedarf Bibliotheken von Drittanbietern zu einer Datei hinzufügt.

Wenn Sie detaillierter werden möchten, wo Sie Ihre Lieferanten und Einstiegspunktdateien trennen:

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);
    }
  })
]

Beachten Sie, dass die Reihenfolge der Plugins sehr wichtig ist.

Dies wird sich auch in Version 4 ändern. Wenn dies offiziell ist, aktualisiere ich diese Antwort.

Update: Index der Suchänderung für Windows-Benutzer

Ich bin nicht sicher, ob ich Ihr Problem vollständig verstehe, aber da ich kürzlich ein ähnliches Problem hatte, werde ich versuchen, Ihnen zu helfen.

Vendor Bundle.

Sie sollten dafür CommonsChunkPlugin verwenden . In der Konfiguration geben Sie den Namen des Blocks (z. B. vendor) und den Dateinamen an, der generiert werden soll ( vendor.js).

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

Jetzt wichtiger Teil, müssen Sie jetzt angeben, was vendorBibliothek bedeutet, und das tun Sie in einem Eintragsabschnitt. Ein weiteres Element zur Eintragsliste mit demselben Namen wie der Name des neu deklarierten Blocks (in diesem Fall dh "Anbieter"). Der Wert dieses Eintrags sollte die Liste aller Module sein, die Sie zum Bündeln verschieben möchten vendor. in deinem Fall sollte es ungefähr so ​​aussehen:

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

JQuery als global

Hatte das gleiche Problem und löste es mit ProvidePlugin . Hier definieren Sie kein globales Objekt, sondern eine Art Shurtcuts zu Modulen. dh Sie können es so konfigurieren:

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

Und jetzt können Sie es einfach $überall in Ihrem Code verwenden - Webpack konvertiert das automatisch in

require('jquery')

Ich hoffe es hat geholfen. Sie können sich auch meine Webpack-Konfigurationsdatei ansehen, die sich hier befindet

Ich liebe Webpack, aber ich stimme zu, dass die Dokumentation nicht die schönste der Welt ist ... aber hey ... die Leute sagten am Anfang dasselbe über Angular-Dokumentation :)

Bearbeiten:

Verwenden Sie CommonsChunkPlugins mehrmals, um Einstiegspunkt-spezifische Hersteller-Chunks zu erhalten:

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

und deklarieren Sie dann verschiedene Erweiterungsbibliotheken für verschiedene Dateien:

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

Wenn sich einige Bibliotheken (und für die meisten von ihnen) zwischen Einstiegspunkten überschneiden, können Sie sie mit demselben Plugin und unterschiedlicher Konfiguration in eine gemeinsame Datei extrahieren. Siehe dieses Beispiel.

Falls Sie daran interessiert sind, Ihre Skripte automatisch getrennt von denen des Anbieters zu bündeln:

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'})
  ]
};

Weitere Informationen zu dieser Funktion finden Sie in der offiziellen Dokumentation .

Ich bin mir auch nicht sicher, ob ich Ihren Fall vollständig verstehe, aber hier ist ein Konfigurationsausschnitt, mit dem Sie für jedes Ihrer Bundles separate Vendor Chunks erstellen können:

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
  }),
]

Und Link zu CommonsChunkPluginDokumenten: http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin