webpack-concat-plugin

3.0.0 verified Sat Apr 25 auth: no javascript maintenance

A webpack plugin to concatenate JavaScript files (npm modules, glob patterns, or plain paths) and optionally inject the resulting script into HTML via html-webpack-plugin. Version 3.0.0 requires webpack ^4.0.1. Notable differentiator: allows concat and injection without webpack's JSONP wrapper. Works exclusively with CommonJS (require); no ESM support. Low maintenance cadence, last release in 2019.

Common errors

error Cannot find module 'webpack-concat-plugin' ↓

cause Package not installed or installed in wrong directory.

fix

Run 'npm install webpack-concat-plugin@3.0.0 --save-dev' in your project root.

error TypeError: ConcatPlugin is not a constructor ↓

cause Using named import instead of default require.

fix

Use 'const ConcatPlugin = require('webpack-concat-plugin');'

error Error: The 'filesToConcat' option is required ↓

cause Missing required filesToConcat configuration.

fix

Add 'filesToConcat: ["some/path.js"]' to the plugin options.

error Error: webpack version 5.x is not supported ↓

cause The plugin is designed for webpack 4.x only.

fix

Downgrade webpack to 4.x or use a different concat plugin (e.g., webpack-concat-plugin does not support webpack 5).

Warnings

breaking Version 3.0.0 requires webpack ^4.0.1. It will not work with webpack 5 or webpack 3. ↓

fix If using webpack 5, consider an alternative like webpack-manifest-plugin or manual concat. For webpack 3, use version 2.x.

deprecated Node engine restriction: >= 4.8 < 5.0.0 || >= 5.10. This is outdated and may cause issues on modern Node versions (e.g., Node >=12). ↓

fix Override engine-strict or use a newer alternative. The package may still work but is untested.

gotcha The plugin only supports CommonJS require; attempting ES import will fail in pure ESM environments (e.g., Node with 'type': 'module'). ↓

fix Use require() or transpile your config with a bundler that converts ESM to CJS.

breaking html-webpack-plugin injection may not work with html-webpack-plugin v4+ due to API changes. ↓

fix Check compatibility: if inject fails, set injectType to 'none' and manually reference the generated file.

Install

npm install webpack-concat-plugin

yarn add webpack-concat-plugin

pnpm add webpack-concat-plugin

Imports

ConcatPlugin
wrong
```
import ConcatPlugin from 'webpack-concat-plugin';
```
correct
```
const ConcatPlugin = require('webpack-concat-plugin');
```
Package uses CommonJS and does not export an ESM default. Using import will fail unless you use a bundler that supports default interop, but the package is not typed for ESM.

default export

wrong

import { ConcatPlugin } from 'webpack-concat-plugin';

correct

const ConcatPlugin = require('webpack-concat-plugin');

There is no named export 'ConcatPlugin'; the entire module exports the class directly.

TypeScript usage
wrong
```
import ConcatPlugin from 'webpack-concat-plugin';
```
correct
```
import ConcatPlugin = require('webpack-concat-plugin');
```
In TypeScript with esModuleInterop: false, use import = require. The package has no type definitions.

Quickstart

Shows basic usage with webpack 4: configure ConcatPlugin to concatenate jQuery, glob files, and a specific dep into a single hashed file.

const ConcatPlugin = require('webpack-concat-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: 'dist',
    filename: 'bundle.js'
  },
  plugins: [
    new ConcatPlugin({
      uglify: false,
      sourceMap: false,
      name: 'result',
      fileName: '[name].[hash:8].js',
      filesToConcat: ['jquery', './src/lib/**', './dep/dep.js']
    })
  ]
};