Maison > interface Web > js tutoriel > Explication détaillée sur l'utilisation du préprocesseur de fichier babel-loader

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

小云云
Libérer: 2018-03-26 09:01:37
original
1880 Les gens l'ont consulté

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
Copier après la connexion

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'
    })
  ]
}
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal