Webpack - Comment charger des scripts hors module dans une portée globale | fenêtre

Question

j'ai donc quelques fichiers de fournisseur que je dois exécuter à partir de la fenêtre (c'est un tas de fonctions à la fenêtre) et j'ai également des polyfills que je voudrais également regrouper dans le bundle du fournisseur.

J'ai donc essayé quelque chose comme ça:

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'js/vendor.min.js',
    minChunks: Infinity,
})

entry: {
    'vendor' : ['./vendor.js', './vendor2.js', './polyfills.js']
}

Maintenant, lorsque j'exécute ma génération de webpack, cela génère mon bundle de fournisseur, mais tout est enveloppé dans un wrapper webpackJsonP, de sorte que les fonctions ne sont pas accessibles sur la portée de la fenêtre.

J'ai également envisagé d'utiliser quelque chose comme lePlugPlugin, mais je ne pouvais pas du tout le faire fonctionner car je n'ai pas de nom défini comme jQuery où tout est mappé.

Est-ce même possible dans webpack?

Answer 1

Utilisez le plugin de chargement de script:

Si vous voulez que le script entier soit enregistré dans l'espace de noms global, vous devez utiliser chargeur de script . Ce n'est pas recommandé, car cela casse le sens des modules ;-) Mais s'il n'y a pas d'autre moyen:

npm install --save-dev script-loader

documents Webpack

Ce chargeur évalue le code dans le contexte global, tout comme vous ajouteriez le code dans une balise de script. Dans ce mode, chaque bibliothèque normale devrait fonctionner. require, module, etc. ne sont pas définis.

Remarque: Le fichier est ajouté en tant que chaîne au bundle. Il n'est pas minimisé par le webpack, utilisez donc une version minimisée. Il n'y a pas non plus de support d'outil de développement pour les bibliothèques ajoutées par ce chargeur.

Ensuite, dans votre fichier entry.js, vous pouvez l'importer en ligne :

import  "script-loader!./eluminate.js"

ou via config:

module.exports = {
  module: {
    rules: [
      {
        test: /eluminate\.js$/,
        use: [ 'script-loader' ]
      }
    ]
  }
}

et dans votre entry.js

import './eluminate.js';

Comme je l'ai dit, cela pollue l'espace de noms global: