Registry / devops / webpack-babel-multi-target-plugin

webpack-babel-multi-target-plugin

JSON →
library2.5.0jsnpmunverified

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.

devopsserialization
npm install webpack-babel-multi-target-plugin
github ↗package ↗
INSTALL
IMPORT
SIG · WEBPACK-BABEL-MULT
W
webpack-babel-multi-target-plugin
devopsjavascriptv2.5.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

BabelMultiTargetPlugin
✓ const BabelMultiTargetPlugin = require('webpack-babel-multi-target-plugin');
✗ import BabelMultiTargetPlugin from '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
✓ BabelMultiTargetPlugin.loader()
✗ require('babel-loader') or {loader: 'babel-loader'}
Replace all babel-loader references with this function call. It returns a loader string, not an object.
BabelMultiTargetPlugin.loader (with custom loader)
✓ BabelMultiTargetPlugin.loader('vue-loader')
✗ BabelMultiTargetPlugin.loader() with vue-loader
For Vue projects, pass 'vue-loader' as an argument to the loader function.

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(), ], };
Debug
Known issues
breakingDo 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().
affects: >=2.0.0
deprecatedThe 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.
affects: >=2.5.0
gotchaDo 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).
affects: >=1.0.0
gotchaThe 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 }.
affects: >=2.0.0
gotchaWhen 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()].
affects: >=1.0.0
gotchaIf 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.
affects: >=1.0.0
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'babel-loader'
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.
TypeError: BabelMultiTargetPlugin is not a constructor
Incorrect import style: using ES module import instead of CommonJS require.
fix
Use const BabelMultiTargetPlugin = require('webpack-babel-multi-target-plugin');
Error: Multiple instances of babel-loader found
Both babel-loader and the plugin's loader are present in module rules.
fix
Replace all uses of 'babel-loader' with BabelMultiTargetPlugin.loader().
HtmlWebpackPlugin: The 'hash' option does not work with multi-build plugins
Incompatible configuration with html-webpack-plugin when using hash: true.
fix
Remove hash: true from HtmlWebpackPlugin options; use contenthash in output filenames instead.
Upgrade
Version history
2.5.0latest on npm
Audit
Dependencies
html-webpack-pluginrequiredRequired for injecting the Safari 10 noModule fix and handling multi-build HTML generation.
terserrequiredUsed for minification in production builds; must be compatible with the plugin's version.
webpackrequiredCore dependency; the plugin is designed for webpack v4.
webpack-dev-serveroptionalRequired for development mode with hot reloading.
Agent activity
27 hits · last 30 days
node
18
Amazon
1
OpenAI (training)
1
Resources
githubhttps://github.com/DanielSchaffer/webpack-babel-multi-target-plugin ↗
packagehttps://www.npmjs.com/package/webpack-babel-multi-target-plugin ↗