webpack Asynchron-Module mit dem Versprechen

Question

Ich verwende webpack in meinen bestehenden Knockout Basis SPA Rahmen, um faul Lastmodelle unter Berücksichtigung, da der Benutzer durch die Website navigiert

ich unter dem unten genannten Faden hatte einen Blick Create individual SPA bundles with Webpack

und die akzeptierte Antwort schien sehr ähnlich zu dem, was ich versuche zu erreichen. Grundsätzlich besteht jede SPA-Seite aus einer Sammlung von Komponenten, die im JSON-Format vom Server zurückgegeben werden.

Der Client ordnet diese Komponenten einzelnen js-Modellen zu. Im Moment sind diese js-Modelle alle in einer großen Datei gebündelt und werden dem Client zum ersten Mal bereitgestellt, wenn die Site gerendert wird.

Ich möchte diese Komponenten (über require und require.ensure) in Stücke zerlegen, die bei Bedarf mit Hilfe von Webpack geladen werden.

Also fiedelte ich mit der vorgeschlagenen Lösung aus dem oben genannten Thread und es hat gut funktioniert. I auch eine Wurzel Richtlinie

var webpack = require('webpack'), 
    path = require('path'); 

var commonsPlugin = 
    new webpack.optimize.CommonsChunkPlugin('common.js'); 

module.exports = { 
    devtool1: 'eval-source-map', 
    entry: { 
     app: './app' 
    }, 
    output: { 
     path: __dirname + "/build", 
     filename: '[name]-bundle.js', 
     publicPath: "/code_split/build/" 
    }, 
    watchOptions: { 
     poll: 2000 
    }, 
    resolve: { 
     root: [ 
      path.resolve('./models/components') 
     ], 
     extensions: ['', '.js'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015'] 
       } 
      } 
     ] 
    }, 
    plugins: [commonsPlugin] 
} 

webpack.config.js hinzugefügt, so dass I-Module ohne Angabe relative Pfade erfordern kann (jedes Modell ist in einem Modul innerhalb js Modelle/Komponenten-Verzeichnis)

Nun ist die Problem, das ich in laufen, ist, dass ich versucht, alle zu extrahieren das erfordert von der Switch-Anweisung auf eine Funktion, die ein Versprechen gibt, die

schön mit meinem vorhandenen Implementierung funktioniert so statt

habe ich es zu

function loadModule(mo){ 
     return new Promise(function(resolve){ 
      require([mo], function(module){ 
       resolve(module.default); 
      }); 
     }); 
    } 

switch(mod) { 
     case "contacts": 
      promise = loadModule("contacts"); 
      break; 
     case "tasks": 
      promise = loadModule("tasks"); 
      break; 
    } 

Nach webpack jedoch ausgeführt wird, schlägt die oben kläglich. Es scheint in eine Endlosschleife zu gehen, da es am Ende eine alarmierend hohe Anzahl von zu verarbeitenden Modulen findet und viele Ausnahmen ausspuckt Ich bin ziemlich sicher, dass dies von der loadModule-Funktion verursacht wird, da wenn ich es direkt versuche, es erfordert funktioniert gut

Irgendwelche Ideen? Dank

Answer 1

Webpack verwendet statische Analyse, um herauszufinden, welche Module zu bündeln (und wie sie zu bündeln). Da Sie das Require abstrahieren, kann webpack nicht mehr herausfinden, was genau Sie benötigen. Um zu vermeiden, dass Dinge brechen, versucht es alles zu bündeln, was Sie möglicherweise meinen könnten. In diesem Fall bedeutet das vermutlich buchstäblich jede einzelne JS-Datei, die es in Ihrem Projektverzeichnis finden kann (einschließlich aller JS-Dateien in node_modules).

Wenn Sie die Async-Anforderungen von Webpack promi- sieren möchten, müssen Sie nur Ihren Code für jedes Async-Paket duplizieren.