webpack-concat-files-plugin

0.5.2 verified Sat Apr 25 auth: no javascript maintenance

Webpack plugin for concatenating and transforming files into bundles. Supports glob patterns, before/after transforms for operations like minification, and Webpack 5 optimization. Current version 0.5.2 (Feb 2021) supports Webpack 4 and 5. Differentiates from alternatives by integrating directly with Webpack's asset pipeline and watch mode. Uses 'bundles' config with src/dest arrays, separation string, and optional transforms. Deprecated old 'source'/'destination' options in favor of 'src'/'dest'.

Common errors

error TypeError: Cannot read properties of undefined (reading 'src') ↓

cause bundles property is missing or not an array

fix

Ensure config object has 'bundles' as an array: new WebpackConcatPlugin({ bundles: [...] }).

error Error: bundle.source is deprecated, use bundle.src instead ↓

cause Using deprecated source property after v0.5.0

fix

Replace 'source' with 'src' in bundle configuration.

error ENOENT: no such file or directory, open '...' ↓

cause Glob pattern does not match any files or path is incorrect

fix

Verify glob pattern and ensure files exist; use path.resolve for absolute paths.

Warnings

breaking v0.5.0 deprecated bundle.source and bundle.destination; replaced with bundle.src and bundle.dest ↓

fix Rename 'source' to 'src' and 'destination' to 'dest' in bundle config.

gotcha Before transform's second parameter may be undefined in v0.5.1 and earlier ↓

fix Upgrade to v0.5.2 or later.

breaking Array-valued bundle.src or bundle.source causes error in v0.5.0 and earlier ↓

fix Upgrade to v0.5.1+ or ensure src is a string.

gotcha bundle.src expects glob string; non-glob paths may not work as expected ↓

fix Use glob patterns like './src/**/*.js' or an array of glob strings.

Install

npm install webpack-concat-files-plugin

yarn add webpack-concat-files-plugin

pnpm add webpack-concat-files-plugin

Imports

default

wrong

import WebpackConcatPlugin from 'webpack-concat-files-plugin';

correct

const WebpackConcatPlugin = require('webpack-concat-files-plugin');

Package does not ship ESM; only CommonJS require works. For TypeScript, use require or skip type definitions.

WebpackConcatPlugin
wrong
```
new WebpackConcatPlugin({ bundles: { ... } })
```
correct
```
new WebpackConcatPlugin({ bundles: [...] })
```
bundles must be an array, not a single object. Common mistake.

bundle.src

wrong

{ source: './path/**/*.js', destination: './output.js' }

correct

{ src: './path/**/*.js', dest: './output.js' }

source/destination deprecated since 0.5.0, use src/dest.

Quickstart

Basic setup concatenating multiple files with optional transform and configuration options.

const WebpackConcatPlugin = require('webpack-concat-files-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new WebpackConcatPlugin({
      bundles: [
        {
          src: ['./src/header.js', './src/footer.js'],
          dest: './dist/combined.js',
          transforms: {
            after: (code) => code.replace(/\s+/g, ' ').trim(),
          },
          encoding: 'utf8',
        },
      ],
      separator: '\n',
      allowWatch: true,
      allowOptimization: false,
    }),
  ],
};