web-dev-qa-db-fra.com

Webpack regroupe mes fichiers dans le mauvais ordre (CommonsChunkPlugin)

Ce que je veux, c'est regrouper mes fichiers de fournisseur JavaScript dans une commande spécifique via CommonsChunkPlugin à partir de Webpack.

J'utilise le CommonsChunkPlugin pour Webpack. L'utilisation de la documentation officielle est simple et facile. Cela fonctionne comme prévu, mais je pense que le plugin regroupe mes fichiers par ordre alphabétique (peut-être faux). Il n'y a pas d'options pour que le plugin spécifie l'ordre dans lequel ils doivent être regroupés.

Remarque: Pour ceux qui ne connaissent pas Bootstrap 4, il nécessite actuellement une dépendance de bibliothèque JavaScript appelée Tether. Tether doit être chargé avant 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 choses se produisent ici:

  1. vendor.bundle.js contient bootstrap , jquery , attache , wowjs
  2. bundle.js contient le reste de ma candidature

Ordre de regroupement:
correct: jquery, tether, bootstrap, wowjs
incorrect: bootstrap, jquery, tether, wowjs

Remarquez dans mon webpack.config.js Je les ai commandés exactement comme ils le devraient mais ils sont regroupés dans le incorrect commande. Peu importe si je les réorganise au hasard, le résultat est le même.

Après avoir utilisé Webpack pour créer mon application, le vendor.bundle.js me montre la commande incorrecte.

Je sais qu'ils sont regroupés de manière incorrecte car Chrome Dev. Tools me dit qu'il existe des problèmes de dépendance. Lorsque je consulte le fichier via l'outil et mon IDE, il est regroupé dans le mauvais ordre.

Mon autre approche a également entraîné le même problème

J'ai également essayé import et require dans mon fichier d'entrée (dans ce cas, app.jsx) sans utiliser les CommonChunkPlugin et qui charge également mes bibliothèques JavaScript par 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';

ou

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> Tether> wowjs

Comment charger mes fichiers fournisseurs dans le bon ordre?

javascriptwebpackwebpack-2uglifyjs
18
Ollie Cee

Vous pouvez essayer https://webpack.js.org/guides/shimming/#script-loader - il semble qu'il exécutera les scripts dans l'ordre et dans le contexte global.

7
Ivan

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

Quelle magie se passe ici?

  1. Webpack crée vendor.bundle.js en minimisant et en regroupant mes fichiers fournisseurs qui s'exécutent désormais dans le contexte global.
  2. Webpack crée bundle.js avec tout son code d'application

fichier d'entrée (app.jsx dans ce cas) 

import './script';

Ce script est juste du JavaScript personnalisé qui utilise jQuery, Bootstrap, Tether et wowjs. Il s'exécute après vendor.bundle.js, lui permettant de s'exécuter avec succès.

Une erreur que j'ai commise en essayant d'exécuter mon script.js était que je pensais que cela devait être dans le contexte mondial. Je l'ai donc importé avec un chargeur de script comme celui-ci: import './script-loader!script';. En fin de compte, vous n'avez pas besoin de le faire, car si vous importez via votre fichier d'entrée, il finira malgré tout dans le fichier de bundle.

Tout va bien.

Merci @Ivan pour le script-loader suggestion. J'ai également remarqué que CommonsChunkPlugin tirait les versions des fournisseurs non minifiés, j'ai donc enchaîné uglify-loader dans le processus.

Cependant, je crois que certains .min.js sont créés différemment pour éliminer les ballonnements supplémentaires. Mais c'est à moi de comprendre. Merci!

13
Ollie Cee

A travaillé avec htmlWebpackPlugin à partir des tutoriels officiels et a changé le formulaire de commande entrée clé. (fournisseur puis app)

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 fichier index.html généré, j'ai le bon ordre

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