Skip to main content

​
Overview

babel-loader allows transpiling JavaScript files using Babel and webpack. This loader enables you to use the latest JavaScript features and JSX syntax by transforming them into code that browsers can understand.
This is an external loader maintained by the Babel team. Install it from npm to use in your webpack configuration.

​
Installation

npm install -D babel-loader @babel/core @babel/preset-env

​
Basic Usage

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

​
React/JSX Support

For React applications, add the React preset: 
npm install -D @babel/preset-react

​
TypeScript Support

For TypeScript with Babel: 
npm install -D @babel/preset-typescript
webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-typescript'
            ]
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
};
Babel does not perform type checking. Use tsc --noEmit or fork-ts-checker-webpack-plugin for type checking.

​
Options

​
cacheDirectory

Enable caching to improve build performance: 
{
  loader: 'babel-loader',
  options: {
    cacheDirectory: true,
    cacheCompression: false
  }
}
Caching can significantly speed up rebuilds during development.

​
presets

Specify Babel presets: 
{
  loader: 'babel-loader',
  options: {
    presets: [
      ['@babel/preset-env', {
        targets: {
          browsers: ['last 2 versions', 'ie >= 11']
        },
        useBuiltIns: 'usage',
        corejs: 3
      }]
    ]
  }
}

​
plugins

Add Babel plugins: 
{
  loader: 'babel-loader',
  options: {
    plugins: [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-optional-chaining'
    ]
  }
}

​
Advanced Configuration

​
Custom Config File

Specify a custom Babel config file: 
{
  loader: 'babel-loader',
  options: {
    configFile: path.resolve(__dirname, 'babel.custom.config.js')
  }
}

​
Environment-Specific Configuration

babel.config.json
{
  "presets": ["@babel/preset-env"],
  "env": {
    "development": {
      "plugins": ["react-refresh/babel"]
    },
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

​
Excluding node_modules Selectively

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules[\/\\](?!(some-module|another-module)[\/\\])/,
        use: 'babel-loader'
      }
    ]
  }
};

​
Performance Optimization

​
Include/Exclude Specific Directories

{
  test: /\.js$/,
  include: path.resolve(__dirname, 'src'),
  exclude: /node_modules/,
  use: 'babel-loader'
}

​
Thread Loader for Parallel Processing

npm install -D thread-loader

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: [
    'thread-loader',
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true
      }
    }
  ]
}

​
Common Issues

​
Issue: Slow Build Times

Solution: Enable caching and limit scope with include: 
{
  test: /\.js$/,
  include: path.resolve(__dirname, 'src'),
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true
    }
  }
}

​
Issue: Module Not Found Errors

Solution: Ensure all necessary presets and plugins are installed: 
npm install -D @babel/core @babel/preset-env babel-loader

​
Issue: Configuration Not Applied

Solution: Check that your .babelrc or babel.config.js is in the correct location or specify configFile option.
.babelrc uses file-relative configuration, while babel.config.js uses project-wide configuration. Choose based on your needs.

​
Integration with Other Tools

​
ESLint

npm install -D eslint-loader

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: ['babel-loader', 'eslint-loader']
}

​
React Fast Refresh

npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['react-refresh/babel']
          }
        }
      }
    ]
  },
  plugins: [
    new ReactRefreshWebpackPlugin()
  ]
};

​
Resources