Detailed explanation of Webpack's babel-loader file preprocessor

This article mainly introduces the detailed explanation of Webpack's babel-loader file preprocessor. Now I share it with you and give it as a reference.

The official explanation of loader is a file preprocessor. In layman's terms, when webpack processes static files, it needs to use loader to load various files, such as: html files need to use html-loader, css needs to use css -loader, style-loader, etc.

Today we are introduced to babel-loader, which is used to process ES6 syntax and compile it into js syntax that the browser can execute.

Installation

We need to use babel-loader babel-core babel-preset

Compatible 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

Use

Let’s start with a little chestnut:

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

You can use the options attribute to pass options to the loader.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use better-scroll plug-in in Angular_AngularJS

Angularjs implementation between controllers Summary of communication method examples

JavaScript code to implement the upload preview function of txt files

The above is the detailed content of Detailed explanation of Webpack's babel-loader file preprocessor. For more information, please follow other related articles on the PHP Chinese website!