targets-webpack-plugin

4.0.0 verified Sat Apr 25 auth: no javascript

Webpack plugin that uses Babel to transpile output bundles for legacy browsers, including dependencies. Version 4.0.0 requires Node >=8. Unlike other solutions (e.g., babel-loader applied per file), it runs transpilation once per asset at the end of compilation, reducing build time. Key differentiator: it handles dependency transpilation automatically and supports custom browser targets via the Browserslist ecosystem.

Common errors

error Error: Cannot find module 'targets-webpack-plugin' ↓

cause Package not installed in node_modules.

fix

Run npm install --save-dev targets-webpack-plugin

error TypeError: TargetsPlugin is not a constructor ↓

cause Using ES module import instead of CommonJS require.

fix

Replace import with: const TargetsPlugin = require('targets-webpack-plugin');

Warnings

gotcha Plugin only transpiles in production mode when 'dev' is false; ensure correct conditional. ↓

fix Check that the plugin is only added when process.env.NODE_ENV === 'production' or similar.

gotcha Requires webpack as a peer dependency; missing webpack will cause runtime errors. ↓

fix Install webpack: npm install webpack --save-dev

deprecated The 'browsers' option uses Browserslist; older configs may reference 'browserslist' array directly. ↓

fix Use object with 'browsers' key or rely on browserslist config file.

Install

npm install targets-webpack-plugin

yarn add targets-webpack-plugin

pnpm add targets-webpack-plugin

Imports

TargetsPlugin

wrong

import TargetsPlugin from 'targets-webpack-plugin';

correct

const TargetsPlugin = require('targets-webpack-plugin');

The package does not export a default ES module; CommonJS require is required.

Quickstart

Configures the TargetsPlugin in a Next.js webpack config to transpile production bundles for legacy browsers.

// next.config.js
const TargetsPlugin = require('targets-webpack-plugin');

module.exports = {
  webpack: function (config, { dev }) {
    if (!dev) {
      config.plugins.push(new TargetsPlugin({
        browsers: ['last 2 versions', 'chrome >= 41']
      }));
    }
    return config;
  }
};