Explication détaillée du préprocesseur de fichier babel-loader de Webpack

Cet article présente principalement l'explication détaillée du préprocesseur de fichier babel-loader de Webpack. Maintenant, je le partage avec vous et le donne comme référence.

L'explication officielle du chargeur est un préprocesseur de fichiers. En termes simples, lorsque Webpack traite des fichiers statiques, il doit utiliser le chargeur pour charger divers fichiers, tels que : les fichiers HTML doivent utiliser un chargeur HTML, les besoins CSS. pour utiliser css -loader, style-loader, etc.

Aujourd'hui, nous découvrons babel-loader, qui est utilisé pour traiter la syntaxe ES6 et la compiler dans la syntaxe js que le navigateur peut exécuter.

Installation

Nous devons utiliser babel-loader babel-core babel-preset

Version compatible : webpack 3. x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
webpack 3.x babel-loader 7.x | babel 6.x

Utiliser

Commençons par un peu de châtaigne :

var htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/, // (不处理node_modules 和 bower_components下的js文件) 优化处理加快速度
        use: {
          loader: 'babel-loader',
          options: {     // options选项中的presets设置的就是当前js的版本
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'index.html',
      inject: 'body',
      filename: 'index.html'
    })
  ]
}

Vous pouvez utiliser l'attribut options pour transmettre des options au chargeur.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser le plug-in de meilleur défilement dans Angular_AngularJS

Implémentation d'Angularjs entre les contrôleurs Résumé de exemples de méthodes de communication

Le code JavaScript implémente la fonction de prévisualisation du téléchargement des fichiers txt

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!