Webpack-bundles, meine Dateien in der falschen Reihenfolge (CommonsChunkPlugin)

Was ich will, ist zu bündeln und meine JavaScript-vendor-Dateien in einer bestimmten Reihenfolge über CommonsChunkPlugin von Webpack.

Ich bin mit der CommonsChunkPlugin für Webpack. Die Nutzung von der offizielle Dokumentation ist geradlinig und einfach. Es funktioniert wie vorgesehen, aber ich glaube, das plugin ist die Bündelung meine Dateien in alphabetischer Reihenfolge (könnte falsch sein). Es gibt keine Optionen für das plugin angeben der Reihenfolge, wie Sie sollten gebündelt werden.

Hinweis: Für diejenigen, die nicht vertraut sind mit Bootstrap-4, so sind es derzeit
erfordert eine JavaScript-Bibliothek die Abhängigkeit genannt Tether.
Tether geladen werden muss, bevor Bootstrap.

webpack.config.js

module.exports = {
  entry: {
    app: './app.jsx',
    vendor: ['jquery', 'tether', 'bootstrap', 'wowjs'],
  },

  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.bundle.js'
    }),

    new webpack.optimize.UglifyJsPlugin(),
  ],
};

Zwei Dinge sind hier passiert:

vendor.bundle.js enthält bootstrap, jquery, tether,
wowjs
bundle.js enthält den rest meiner Anwendung

Bündeln, um:

richtige: jquery, tether, bootstrap, wowjs

falsch: bootstrap, jquery, tether, wowjs

Hinweis in meinem webpack.config.js befahl ich Ihnen genau, wie Sie sollten, aber Sie sind gebündelt in der falsche um. Es spielt keine Rolle, wenn ich Sie neu anzuordnen zufällig das Ergebnis ist das gleiche.

Nachdem ich Webpack zu bauen, meine Anwendung, die vendor.bundle.js zeigt mir die falsche Reihenfolge.

Ich weiß, Sie sind gebündelt falsch Ursache Chrome Dev. Tools sagen mir, es gibt Abhängigkeit Probleme. Wenn ich die Datei über das tool und meine IDE ist es gebündelt in der falschen Reihenfolge.

Meine anderen Ansatz führte auch dazu, daß in der gleichen Ausgabe

Ich habe auch versucht import und require in meinem Eintrag " Datei - (in diesem Fall, app.jsx) ohne die Nutzung der CommonChunkPlugin und lädt auch meine JavaScript-Bibliotheken in alphabetischer Reihenfolge aus irgendeinem Grund.

webpack.config.js

module.exports = {
  entry: './app.jsx',

  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },

  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
  ],
};

app.jsx (Eintrag)

import './node_modules/jquery/dist/jquery.min';
import './node_modules/tether/dist/js/tether.min';
import './node_modules/bootstrap/dist/js/bootstrap.min';
import './node_modules/wowjs/dist/wow.min';

oder

require('./node_modules/jquery/dist/jquery.min');
require('./node_modules/tether/dist/js/tether.min');
require('./node_modules/bootstrap/dist/js/bootstrap.min');
require('./node_modules/wowjs/dist/wow.min');

Das Ergebnis?

Bootstrap > jQuery > Tether - > wowjs

Wie lade ich meine Verkäufer-Dateien in der richtigen Reihenfolge?

Tut alphabetischer Reihenfolge machen es alle falsch? Es geschieht mit Absicht, so dass die Reihenfolge hat keinen Einfluss auf die Inhalte. "Ursache Chrome Dev. Tools sagen mir, es gibt Abhängigkeit Probleme. "--- alle details auf, die?
Gut, es gibt riesige Probleme, wenn es erfolgt in alphabetischer Reihenfolge. Ein Wesen, dass Bootstrap, jQuery und erfordert Tether geladen werden, bevor Sie selbst sonst kann es nicht richtig funktionieren.
Die Platzierung, um in die Bündel nicht in irgendeiner Weise Einfluss auf die Reihenfolge, wie Sie geladen sind, in der Laufzeit. Das problem wird durch etwas anderes verursacht.

InformationsquelleAutor Ollie Cee | 2017-03-23

6

Können Sie versuchen, https://webpack.js.org/guides/shimming/#script-loader - es sieht nach ausführen von Skripts in Ordnung und in einen globalen Kontext.
- Interessanterweise habe ich verwendet script-loader und gebündelt alles falsch. Ich entschied git clone verschiedenen Textbausteinen Reagieren und Beispiele zu testen script-loader, CommonsChunkPlugin und import / require Aussagen, aber Sie alle fallen unter das gleiche Problem.
- Also ich strikt script-loader und es funktioniert definitiv, aber das Endergebnis ist 1 gebündelt-Datei mit allen meinen JS. Ich wollte vermeiden, dass 1 große Datei, da 2 kleine Dateien (1-vendor-libs und 1 Anwendung) geladen über async wäre viel mehr ideal. Ich werde weiter Experimentieren mit splitting/chunking mit script-loader um zu sehen, ob ich das Ergebnis
- es ist nicht schwer, zu einem separaten bundle aus Bibliotheken zu definieren, die globals, und laden Sie Sie separat, bevor alle anderen bundles. Natürlich haben Sie implizite (nicht require oder import) Abhängigkeiten auf z.B. jquery in anderen bundles
InformationsquelleAutor Ivan
12

Erfolg!

webpack.config.js
```
module.exports = {
  entry: {
    app: './app.jsx',
    vendor: [
        "script-loader!uglify-loader!jquery",
        "script-loader!uglify-loader!tether",
        "script-loader!uglify-loader!bootstrap",
        "script-loader!uglify-loader!wowjs",
    ]
  },

  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.bundle.js'
    }),

    new webpack.optimize.UglifyJsPlugin(),
  ],
};
```
Was Magie ist hier passiert?
1. Webpack erstellt vendor.bundle.js durch minifying & Bündelung von meinem Verkäufer
  Dateien, die führen Sie nun im globalen Kontext.
2. Webpack erstellt bundle.js mit all seinen Anwendungs-code
Eintrag " Datei - (app.jsx in diesem Fall)
```
import './script';
```
Dieses Skript ist nur benutzerdefinierter JavaScript-Code, verwendet jQuery, Bootstrap, Tether und wowjs. Es führt nach vendor.bundle.js, so dass es erfolgreich ausgeführt werden kann.

Einen Fehler, den ich versucht auszuführen meiner script.js war, dass ich dachte, es musste sein, im globalen Kontext. Also ich importierte es mit script-loader wie diese: import './script-loader!script';. Am Ende, Sie brauchen nicht zu, weil wenn Sie den Import durch Ihre Eingabe-Datei wird es am Ende in der bundle-Datei, unabhängig.

Alles gut ist.

Danke @Ivan für die script-loader Vorschlag. Mir ist auch aufgefallen, dass die CommonsChunkPlugin zog die non-minified Verkäufer Versionen, so dass ich angekettet uglify-loader in den Prozess.

Obwohl, ich glaube, einige .min.js auf eine andere Weise erstellt, um loszuwerden, extra aufblasen. Allerdings ist das für mich herauszufinden. Danke!

InformationsquelleAutor Ollie Cee

Arbeitete mit htmlWebpackPlugin aus offiziellen tutorials und schaltete das Bestellformular Eintrag - Taste. ( Verkäufer dann app )

In webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
      vendor: [
          'angular'
      ],
      app: [
          './src/index.js',
          './src/users/users.controller.js',
          './src/users/users.directive.js',
      ]
  },
   plugins: [
       new CleanWebpackPlugin(['dist']),
       new HtmlWebpackPlugin({
           template: './src/index-dev.html'
       }),
       new webpack.NamedModulesPlugin()
  ...
}

Nun in die generierte index.html - Datei habe ich die richtige Reihenfolge

<script src='vendor.bundle.js'></script>
<script src='app.bundle.js'></scrip

InformationsquelleAutor que1326

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Meine anderen Ansatz führte auch dazu, daß in der gleichen Ausgabe

Erfolg!

Alles gut ist.