{"id":20710,"library":"webpack-babel-multi-target-plugin","title":"webpack-babel-multi-target-plugin","description":"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.","status":"active","version":"2.5.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/DanielSchaffer/webpack-babel-multi-target-plugin","tags":["javascript","webpack","webpack-plugin","babel","babel-loader","differential-loading","esnext","esmodules","es2015","typescript"],"install":[{"cmd":"npm install webpack-babel-multi-target-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-babel-multi-target-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-babel-multi-target-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for injecting the Safari 10 noModule fix and handling multi-build HTML generation.","package":"html-webpack-plugin","optional":false},{"reason":"Used for minification in production builds; must be compatible with the plugin's version.","package":"terser","optional":false},{"reason":"Core dependency; the plugin is designed for webpack v4.","package":"webpack","optional":false},{"reason":"Required for development mode with hot reloading.","package":"webpack-dev-server","optional":true}],"imports":[{"note":"The package does not export a default ES module; use CommonJS require. TypeScript users should use import BabelMultiTargetPlugin = require('...').","wrong":"import BabelMultiTargetPlugin from 'webpack-babel-multi-target-plugin';","symbol":"BabelMultiTargetPlugin","correct":"const BabelMultiTargetPlugin = require('webpack-babel-multi-target-plugin');"},{"note":"Replace all babel-loader references with this function call. It returns a loader string, not an object.","wrong":"require('babel-loader') or {loader: 'babel-loader'}","symbol":"BabelMultiTargetPlugin.loader","correct":"BabelMultiTargetPlugin.loader()"},{"note":"For Vue projects, pass 'vue-loader' as an argument to the loader function.","wrong":"BabelMultiTargetPlugin.loader() with vue-loader","symbol":"BabelMultiTargetPlugin.loader (with custom loader)","correct":"BabelMultiTargetPlugin.loader('vue-loader')"}],"quickstart":{"code":"const BabelMultiTargetPlugin = require('webpack-babel-multi-target-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: __dirname + '/dist',\n    filename: '[name].[contenthash].js',\n  },\n  resolve: {\n    mainFields: ['es2015', 'module', 'jsnext:main', 'browser', 'main'],\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        use: [BabelMultiTargetPlugin.loader()],\n      },\n    ],\n  },\n  plugins: [\n    new BabelMultiTargetPlugin(),\n    new HtmlWebpackPlugin(),\n  ],\n};","lang":"javascript","description":"Minimal webpack configuration using BabelMultiTargetPlugin for differential loading. Replace babel-loader with BabelMultiTargetPlugin.loader(), set resolve.mainFields, and add the plugin."},"warnings":[{"fix":"Remove any exclude patterns for node_modules from rules using BabelMultiTargetPlugin.loader().","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade html-webpack-plugin to ^3.2.0 || ^4.0.0.","message":"The plugin requires html-webpack-plugin v3.2+ or v4.0+; older versions are not supported.","severity":"deprecated","affected_versions":">=2.5.0"},{"fix":"Replace all instances of 'babel-loader' with BabelMultiTargetPlugin.loader(). Remove babel-loader from package.json dependencies (it's a dependency of the plugin).","message":"Do not use both babel-loader directly and BabelMultiTargetPlugin.loader() in the same webpack config; it will cause duplicate transpilation or conflicts.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Either use HtmlWebpackPlugin or set BabelMultiTargetPlugin options to disable the fix: { safari10NoModuleFix: false }.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Example: use: ['ts-loader', BabelMultiTargetPlugin.loader()].","message":"When using TypeScript with ts-loader, order matters: BabelMultiTargetPlugin.loader() must appear after ts-loader in the use array (loaders execute bottom-to-top).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Reorder rules so expose-loader comes first, and avoid import statements for exposed globals.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"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.","cause":"babel-loader is not installed or version mismatch with webpack-babel-multi-target-plugin.","error":"Module not found: Error: Can't resolve 'babel-loader'"},{"fix":"Use const BabelMultiTargetPlugin = require('webpack-babel-multi-target-plugin');","cause":"Incorrect import style: using ES module import instead of CommonJS require.","error":"TypeError: BabelMultiTargetPlugin is not a constructor"},{"fix":"Replace all uses of 'babel-loader' with BabelMultiTargetPlugin.loader().","cause":"Both babel-loader and the plugin's loader are present in module rules.","error":"Error: Multiple instances of babel-loader found"},{"fix":"Remove hash: true from HtmlWebpackPlugin options; use contenthash in output filenames instead.","cause":"Incompatible configuration with html-webpack-plugin when using hash: true.","error":"HtmlWebpackPlugin: The 'hash' option does not work with multi-build plugins"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}