web-dev-qa-db-fra.com

chargeurs de webpack et inclure

Je suis nouveau dans WebPack et j'essaie de comprendre les chargeurs ainsi que leurs propriétés telles que test, loader, include, etc.

Voici un extrait de code de webpack.config.js que j'ai trouvé dans google.

module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'index.js'),
          path.resolve(__dirname, 'config.js'),
          path.resolve(__dirname, 'lib'),
          path.resolve(__dirname, 'app'),
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'test', 'test.build.js')
        ],
        cacheDirectory: true,
        query: {
          presets: ['es2015']
        }
      },
    ]
}

  1. Ai-je raison de faire ce test: /.js$/ sera utilisé uniquement pour les fichiers avec l'extension .js?

  2. Le chargeur: 'babel-loader', est le chargeur que nous installons à l'aide de npm

  3. Le comprennent: j'ai beaucoup de questions à ce sujet. Ai-je raison de dire que tout ce que nous mettons à l'intérieur du tableau sera transpilé? Cela signifie que index.js, config.js et tous les fichiers * .js de lib, app et src seront transpilés.

  4. Plus de questions sur l'inclusion: lorsque les fichiers sont transpilés, les fichiers * .js sont-ils concaténés dans un seul gros fichier?

  5. Je pense exclure est explicite. Il ne sera pas transpiré.

  6. Que fait la requête: {presets: ['es2015']}?

javascriptecmascript-6webpackwebpack-style-loader
30
devwannabe

Dans la configuration Webpack, la configuration comporte de nombreux éléments, les plus importants étant:

  1. entry - peut être un tableau ou un objet définissant le point d'entrée de l'actif que vous souhaitez regrouper, ce peut être un js, comme le dit le test indiqué ici, ne le faites que pour /.js$. Votre application, si elle a plusieurs points d’entrée, utilise un tableau.
  2. include - définit l'ensemble de chemins ou de fichiers où les fichiers importés seront transformés par le chargeur.
  3. exclure est explicite (ne transformez pas de fichier à partir de ces endroits).

  4. sortie - le dernier paquet que vous voulez créer. si vous spécifiez par exemple

    sortie: {nom du fichier: "[nom] .bundle.js", fournisseur: "réagir"}

    Ensuite, les fichiers js de votre application seront regroupés sous le nom main.bundle.js et réagiront dans un fichier vendor.js. C'est une erreur si vous n'utilisez pas les deux en page HTML.

J'espère que ça a aidé

18
sandeep

Cette documentation m'a aidé à mieux comprendre. On dirait que c'est pour le Webpack 1 mais que cela s'applique toujours.

https://webpack.github.io/docs/configuration.html#module-loaders

Chargeurs

Un tableau de chargeurs appliqués automatiquement.

Chaque article peut avoir ces propriétés:

  • test: Une condition à remplir
  • exclure: Une condition qui ne doit pas être remplie
  • include: Un tableau de chemins ou de fichiers où les fichiers importés seront transformés par le chargeur.
  • loader: Une chaîne de chargeurs “!” séparés
  • loaders: Un tableau de chargeurs sous forme de chaîne

Cet exemple m'a aidé à comprendre ce qui se passe. On dirait que vous utilisez soit inclure, soit exclure, mais pas les deux. Le test est une condition appliquée à tous les fichiers. Ainsi, si vous incluez un dossier, chaque fichier doit satisfaire à la condition de test. Je n'ai pas vérifié cela, mais d'après l'exemple fourni par la documentation, on dirait que c'est ainsi que cela fonctionne.

    module: {

      rules: [
        {
          // "test" is commonly used to match the file extension
          test: /\.jsx$/,

          // "include" is commonly used to match the directories
          include: [
            path.resolve(__dirname, "app/src"),
            path.resolve(__dirname, "app/test")
          ],
          // "exclude" should be used to exclude exceptions
          // try to prefer "include" when possible

          // the "loader"
          loader: "babel-loader" // or "babel" because webpack adds the '-loader' automatically
        }
      ]

    }
4
zechdc