webpack2 code splitting und CommonsChunkPlugin

Ich habe ein Problem mit Code-Splitting und dem CommonsChunkPlugin. Ich bin gewohnt, require.js, wo die Dateien automatisch zwischengespeichert werden. Ich verwende auch die libraryTarget: 'amd' für meine Webpack-Konfiguration.webpack2 code splitting und CommonsChunkPlugin

diese beiden einfachen Dateien betrachtet, ist dies die Ausgabe erhalte ich:

// fileA.js 
import $ from 'jquery' 

// fileB.js 
import $ from 'jquery' 

    Asset Size Chunks     Chunk Names 
fileB.js 271 kB  0 [emitted] [big] fileB 
fileA.js 271 kB  1 [emitted] [big] fileA

So beide Dateien, fileA und fileB haben jquery enthalten. Außerdem kann ich diese Dateien in meiner html Datei verwenden.

require(['./dist/fileA.js', './dist/fileB.js'], function() { 
})

sich nach den docs ich die CommonsChunkPlugin im Grunde verwenden können, um Jquery in eine eigene Datei zu extrahieren, so meine Config wie folgt aussieht:

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'common' 
}),

in dieser Ausgabe führt:

Asset  Size Chunks     Chunk Names 
fileB.js 635 bytes  0 [emitted]   fileB 
fileA.js 617 bytes  1 [emitted]   fileA 
common.js  274 kB  2 [emitted] [big] common

ABER jetzt kann ich den obigen require Block nicht verwenden, weil die common.js auch inclu der Webpack-Laufzeit. Alles was ich jetzt bekomme ist ein Uncaught ReferenceError: webpackJsonp is not defined Fehler.

Also, was ich brauchen, ist:

fileA.js (enthält nur "dateiA" Code, erfordert jquery)
fileB.js (enthält nur "fileB" Code, erfordert jquery)
jquery.js (alle von der jquery Sachen)
common.js (enthält nur die Laufzeit für webpack)

ich habe bereits versucht, so etwas wie dies für fileA und fileB, aber es ist im Grunde die gleiche Ausgabe:

define(['jquery'], function ($) { 

})

A (Vendor) Bibliothek nur geladen werden soll, wenn ein Skript (wie fileA) geladen ist, und hat es als Abhängigkeit (wie es mit requirejs ist) .

Kann dies erreicht werden? Ich blätterte die Dokumente des webpack2 mehrmals durch, konnte aber nichts finden, was mir helfen könnte ...

edit: Ok, mit der Hilfe von einigen Github Probleme gelang es mir, die richtige Asset-Generation mit der folgenden Konfiguration zu erhalten:

module.exports = { 
    entry: { 
    jquery: ['jquery'], 
    vue: ['vue'], 
    fileA: ['./src/fileA.js'], 
    fileB: ['./src/fileB.js'], 
    fileC: ['./src/fileC.js'] 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    publicPath: '/dist', 
    filename: '[name].js', 
    libraryTarget: 'amd' 
    } 
} 

module.exports.plugins = (module.exports.plugins || []).concat([ 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: ['vue', 'jquery'] 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: 'common', 
    chunks: ['vue', 'jquery'], 
    minChunks: Infinity 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin() 
])

ich die Quelldateien geändert:

// fileA.js 
import $ from 'jquery' 
import Vue from 'vue' 
// fileB.js 
import $ from 'jquery' 
// fileC.js 
import Vue from 'vue'

und dies ist die Ausgabe:

vue.js  193 kB  0 [emitted]   vue 
fileC.js 447 bytes  1 [emitted]   fileC 
fileB.js 579 bytes  2 [emitted]   fileB 
fileA.js 666 bytes  3 [emitted]   fileA 
jquery.js  269 kB  4 [emitted] [big] jquery 
common.js 5.78 kB  5 [emitted]   common

jedoch mit ihm in einem .html Datei wie so ergibt sich folgende Fehler:

<body> 
    <script src="./dist/common.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script> 
    <script> 
    require(['./dist/fileA.js', './dist/fileB.js', './dist/fileC.js'], function (a, b, c) { 
    }) 
    </script> 
</body>

Der folgende Fehler tritt sowohl für fileA und für fileC ...

common.js:55 Uncaught TypeError: Cannot read property 'call' of undefined 
    at __webpack_require__ (common.js:55) 
    at Object.7 (fileA.js:16) 
    at __webpack_require__ (common.js:55) 
    at Object.6 (fileA.js:6) 
    at __webpack_require__ (common.js:55) 
    at webpackJsonpCallback (common.js:26) 
    at fileA.js:1 
    at Object.execCb (require.js:1696) 
    at Module.check (require.js:883) 
    at Module.enable (require.js:1176)

edit:

Ich habe ein erstellen repo on github zeigt das Problem, das ich lief. Laut der Antwort von Rafael De Leon verwende ich jetzt System.import('<module>'), um andere Dateien asynchron zu importieren. main.ts importiert fileA.ts über diese Syntax, was zu einem Fehler führt, wenn output.js (die kompilierte main.ts Datei) erforderlich ist. Der Fehler scheint zu passieren, wenn fileA geladen wird von output.js ... Ich habe auch eine github issue erstellt, weil ich denke, es ist ein Bug.

Quelle

2017-07-04 Johannes

A (Vendor) library should only be loaded, if a script (like fileA) is loaded and has it as a dependency (as it is with requirejs).

Wenn Sie das Ergebnis wollen, ist CommonsChunkPlugin nicht das, was Sie suchen. Dieses Plugin soll Dateien, die von verschiedenen Einträgen oder anderen CommonChunkPlugins verwendet werden, in einer Datei aggregieren.

Ich denke, was Sie suchen import() oder require.ensure „Verkäufer“ Dateien

sonst auf Anfrage How to bundle vendor scripts separately and require them as needed with Webpack? arbeiten zu laden

Quelle

2017-07-04 16:59:12

ich schon einen Blick nahm an der 'import()' und 'require.ensure' und konnte es nicht richtig funktionieren. Ich werde die vorgeschlagene Frage jedoch versuchen und so schnell wie möglich zurückkommen! – Johannes

Ich aktualisierte meine Antwort basierend auf Ihrem Vorschlag, stieß aber auf ein anderes Problem. Irgendwelche Ideen? – Johannes

webpack2 code splitting und CommonsChunkPlugin

Antwort

Verwandte Themen