Webpack bundles mes fichiers dans le mauvais ordre (CommonsChunkPlugin)

Ce que je veux, c'est mon bundle JavaScript fournisseur de fichiers dans un ordre spécifique via CommonsChunkPlugin de Webpack.

Je suis en utilisant le CommonsChunkPlugin pour Webpack. L'utilisation de la la documentation officielle est simple et facile. Il fonctionne comme prévu, mais je crois que le plugin est le regroupement de mes fichiers dans l'ordre alphabétique (peut être à tort). Il n'y a pas d'options pour le plugin pour spécifier l'ordre où ils doivent être regroupés.

Remarque: Pour ceux qui ne sont pas familiers avec Bootstrap 4, il est actuellement
nécessite une bibliothèque JavaScript dépendance appelé Attache.
L'attache doit être chargé avant de 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(),
  ],
};

Deux il se passe des choses ici:

vendor.bundle.js contient bootstrap, jquery, attache,
wowjs
bundle.js contient le reste de ma demande

Groupement de commande:
correct: jquery, tether, bootstrap, wowjs
incorrect: bootstrap, jquery, tether, wowjs

Avis dans mon webpack.config.js j'ai commandé exactement comme ils le devraient, mais ils sont regroupés dans la incorrect commande. Ce n'est pas grave si je les réorganiser de façon aléatoire le résultat est le même.

Après je utiliser Webpack de construire ma demande, le vendor.bundle.js me montre un ordre incorrect.

Je sais qu'ils sont regroupés de manière incorrecte cause Chrome Dev. Outils me dire il y a des problèmes de dépendance. Quand j'ai vue le fichier par le biais de l'outil et de mon IDE, il est livré dans un ordre incorrect.

Mon autre approche a également abouti à la même question

J'ai aussi essayé import et require dans mon entrée de fichier (dans ce cas, app.jsx) sans l'utilisation de la CommonChunkPlugin et que les charges de mes bibliothèques JavaScript dans l'ordre alphabétique pour une raison quelconque.

webpack.config.js

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

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

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

app.jsx (entrée)

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';

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

Le résultat?
Bootstrap > jQuery > Attache > wowjs

Comment puis-je charger mon fournisseur de fichiers dans le bon ordre?

N'par ordre alphabétique-il de mal? C'est fait à dessein, de sorte que l'ordre n'a pas d'incidence sur le contenu. "cause Chrome Dev. Outils me dire il y a des problèmes de dépendance. "--- tous les détails sur qui?
Eh bien, il y a d'énormes problèmes si c'est fait dans l'ordre alphabétique. L'une étant que Bootstrap nécessite jQuery et Attache pour être chargé avant de lui-même sinon il ne peut pas fonctionner correctement.
L'ordonnance de placement dans le bundle n'est pas en aucune façon influer sur l'ordre où ils sont chargés dans le moment de l'exécution. Le problème que vous rencontrez soit causée par quelque chose d'autre.

OriginalL'auteur Ollie Cee | 2017-03-23

5

Vous pouvez essayer https://webpack.js.org/guides/shimming/#script-loader - on dirait qu'il va exécuter les scripts dans l'ordre et dans un contexte global.

Curieusement, j'ai utilisé script-loader et livré tout de manière incorrecte. J'ai décidé de git clone divers Réagir boilerplates et des exemples pour tester script-loader, CommonsChunkPlugin et import / require déclarations, mais ils tombent tous sous le même problème.
J'ai donc strictement utilisé script-loader et il fonctionne bien mais le résultat final est 1 fichier empaqueté avec tous mes JS. Je voulais éviter d'avoir 1 gros fichier depuis 2 petits fichiers (1 vendeur-libs et 1 application) chargé via async serait beaucoup plus idéal. Je vais continuer à expérimenter avec de la division de segmentation avec un script-chargeur pour voir si je peux obtenir ce résultat
il n'est pas difficile de faire un autre faisceau de bibliothèques qui ont pour définir les variables globales et les charger séparément avant tous les autres bundles. Bien sûr, vous devrez implicite (require ou import) dépendances sur, par exemple, jquery dans d'autres bundles

OriginalL'auteur Ivan
11

Succès!

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(),
  ],
};
```
Ce qu'est la magie qui se passe ici?
1. Webpack crée vendor.bundle.js par minifying & regroupement mon fournisseur
  les fichiers qui maintenant s'exécuter dans le contexte mondial.
2. Webpack crée bundle.js avec l'ensemble de son code d'application
entrée de fichier (app.jsx dans ce cas)
```
import './script';
```
Ce script n'est qu'un code JavaScript personnalisé qui utilise jQuery, Bootstrap, d'Attache et de wowjs. Il s'exécute après vendor.bundle.js, lui permettant d'exécuter avec succès.

Une erreur que j'ai faite essayer à l'exécution de mes script.js est que je pensais que cela devait être dans le contexte mondial. J'ai donc importé avec un script-chargeur comme ceci: import './script-loader!script';. En fin de compte, vous n'avez pas besoin parce que si vous êtes à l'importation par le biais de votre entrée de fichier il va finir dans le fichier bundle indépendamment.

Tout est bon.

Merci @Ivan pour le script-loader suggestion. J'ai aussi remarqué que le CommonsChunkPlugin tirait la non-minifiés vendeur versions donc j'ai enchaîné uglify-loader dans le processus.

Bien, je crois que certains .min.js sont créés différemment de se débarrasser des extra ballonnement. Si ce n'est pour moi à comprendre. Merci!

OriginalL'auteur Ollie Cee

Travaillé avec htmlWebpackPlugin de tutoriels officiels et allumé le formulaire de commande entrée clé. ( vendeur puis application )

Dans 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()
  ...
}

Maintenant dans le générés index.html fichier j'ai le bon ordre

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

OriginalL'auteur que1326

Vous devez vous connecter pour publier un commentaire.

Mon autre approche a également abouti à la même question

Succès!

Tout est bon.