Detaillierte Erläuterung des Babel-Loader-Dateipräprozessors von Webpack

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Babel-Loader-Dateipräprozessors von Webpack vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Die offizielle Erklärung des Loaders ist ein Dateipräprozessor. Wenn das Webpack statische Dateien verarbeitet, muss es zum Laden verschiedener Dateien einen Loader verwenden, z. B.: HTML-Dateien müssen einen HTML-Loader verwenden, CSS muss verwendet werden um CSS-Loader, Style-Loader usw. zu verwenden.

Heute stellen wir den Babel-Loader vor, der zur Verarbeitung der ES6-Syntax und zur Kompilierung in js-Syntax verwendet wird, die der Browser ausführen kann.

Installation

Wir müssen den Babel-Loader Babel-Core Babel-Preset verwenden

Kompatible Version: 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

Verwenden Sie

Beginnen wir mit einer kleinen Kastanie: 🎜 >

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

Sie können das Optionsattribut verwenden, um Optionen an den Loader zu übergeben.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie das Better-Scroll-Plug-in in Angular_AngularJS

AngularJS-Implementierung zwischen Controllern Zusammenfassung von Beispiele für Kommunikationsmethoden

JavaScript-Code implementiert die Upload-Vorschaufunktion von TXT-Dateien

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Babel-Loader-Dateipräprozessors von Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!