instructions d'utilisation du préprocesseur de fichier babel-loader

Cette fois, je vous apporte des instructions pour utiliser le préprocesseur de fichiers babel-loader. Quelles sont les précautions lors de l'utilisation du préprocesseur de fichiers babel-loader. Voici des cas pratiques, jetons un coup d'œil.

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'
    })
  ]
}

peut utiliser les options Attributs pour transmettre les options au chargeur.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Appel du plug-in de carte Baidu dans Vue

Instructions détaillées pour l'utilisation de jointjs dans vue

Explication détaillée des étapes de tests unitaires et E2E avec Angular CLI

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!