Explication détaillée sur l'utilisation du préprocesseur de fichier babel-loader

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 html-loader, les CSS doivent utiliser css. -loader, style-loader et ainsi de suite. 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

Utilisons

Donnons d'abord 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.

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!