webpack-babel-multi-target-plugin

2.5.0 verified Sat Apr 25 auth: no javascript

A Webpack plugin that works with Babel to enable differential loading - producing ES2015 builds for modern browsers with an ES5 fallback for legacy browsers. Current stable version is 2.5.0. The plugin integrates with html-webpack-plugin (^3.2.0 || ^4.0.0), terser (>=3.12.0), webpack (^4.19.0), and webpack-dev-server (^3.1.0). It ships TypeScript types. Key differentiators: automates the dual-build setup described by Philip Walton, avoids manual configuration of multiple webpack entries, and natively handles Safari 10 noModule fix injection.

Common errors

error Module not found: Error: Can't resolve 'babel-loader' ↓

cause babel-loader is not installed or version mismatch with webpack-babel-multi-target-plugin.

fix

Remove babel-loader from your package.json; it is a dependency of the plugin. Run npm install to ensure the plugin's version is used.

error TypeError: BabelMultiTargetPlugin is not a constructor ↓

cause Incorrect import style: using ES module import instead of CommonJS require.

fix

Use const BabelMultiTargetPlugin = require('webpack-babel-multi-target-plugin');

error Error: Multiple instances of babel-loader found ↓

cause Both babel-loader and the plugin's loader are present in module rules.

fix

Replace all uses of 'babel-loader' with BabelMultiTargetPlugin.loader().

error HtmlWebpackPlugin: The 'hash' option does not work with multi-build plugins ↓

cause Incompatible configuration with html-webpack-plugin when using hash: true.

fix

Remove hash: true from HtmlWebpackPlugin options; use contenthash in output filenames instead.

Warnings

breaking Do not exclude node_modules in the babel-loader rule when using this plugin; it manages exclusions internally. Excluding node_modules will break differential loading for dependencies. ↓

fix Remove any exclude patterns for node_modules from rules using BabelMultiTargetPlugin.loader().

deprecated The plugin requires html-webpack-plugin v3.2+ or v4.0+; older versions are not supported. ↓

fix Upgrade html-webpack-plugin to ^3.2.0 || ^4.0.0.

gotcha Do not use both babel-loader directly and BabelMultiTargetPlugin.loader() in the same webpack config; it will cause duplicate transpilation or conflicts. ↓

fix Replace all instances of 'babel-loader' with BabelMultiTargetPlugin.loader(). Remove babel-loader from package.json dependencies (it's a dependency of the plugin).

gotcha The Safari 10 noModule fix (<script nomodule> polyfill) depends on html-webpack-plugin. If not using HtmlWebpackPlugin, you must manually handle the fix or disable it. ↓

fix Either use HtmlWebpackPlugin or set BabelMultiTargetPlugin options to disable the fix: { safari10NoModuleFix: false }.

gotcha When using TypeScript with ts-loader, order matters: BabelMultiTargetPlugin.loader() must appear after ts-loader in the use array (loaders execute bottom-to-top). ↓

fix Example: use: ['ts-loader', BabelMultiTargetPlugin.loader()].

gotcha If you use expose-loader, rules with expose-loader must be defined before rules with BabelMultiTargetPlugin.loader(). Also, do not import exposed libraries in your code; reference them globally or use webpack.ProvidePlugin. ↓

fix Reorder rules so expose-loader comes first, and avoid import statements for exposed globals.

Install

npm install webpack-babel-multi-target-plugin

yarn add webpack-babel-multi-target-plugin

pnpm add webpack-babel-multi-target-plugin

Imports

BabelMultiTargetPlugin
wrong
```
import BabelMultiTargetPlugin from 'webpack-babel-multi-target-plugin';
```
correct
```
const BabelMultiTargetPlugin = require('webpack-babel-multi-target-plugin');
```
The package does not export a default ES module; use CommonJS require. TypeScript users should use import BabelMultiTargetPlugin = require('...').
BabelMultiTargetPlugin.loader
wrong
```
require('babel-loader') or {loader: 'babel-loader'}
```
correct
```
BabelMultiTargetPlugin.loader()
```
Replace all babel-loader references with this function call. It returns a loader string, not an object.
BabelMultiTargetPlugin.loader (with custom loader)
wrong
```
BabelMultiTargetPlugin.loader() with vue-loader
```
correct
```
BabelMultiTargetPlugin.loader('vue-loader')
```
For Vue projects, pass 'vue-loader' as an argument to the loader function.

Quickstart

Minimal webpack configuration using BabelMultiTargetPlugin for differential loading. Replace babel-loader with BabelMultiTargetPlugin.loader(), set resolve.mainFields, and add the plugin.

const BabelMultiTargetPlugin = require('webpack-babel-multi-target-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: '[name].[contenthash].js',
  },
  resolve: {
    mainFields: ['es2015', 'module', 'jsnext:main', 'browser', 'main'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [BabelMultiTargetPlugin.loader()],
      },
    ],
  },
  plugins: [
    new BabelMultiTargetPlugin(),
    new HtmlWebpackPlugin(),
  ],
};