Comment utiliser le préprocesseur de fichiers Babel-loader

Cette fois, je vais vous expliquer comment utiliser le préprocesseur de fichiers babel-loader, et quelles sont les précautions lors de l'utilisation du préprocesseur de fichiers babel-loader. Ce qui suit est un cas pratique, 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

Utilisation

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

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

Lecture recommandée :

Documentation Vue points sujets aux erreurs organisés

Explication détaillée des étapes pour générer un routage à l'aide d'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!