Merge Files Webpack Plugin

1.1.2 verified Sat Apr 25 auth: no javascript maintenance

This webpack plugin merges multiple files output by extract-text-webpack-plugin (e.g., per-entry CSS files) into a single file. Version 1.1.2 is the latest; no new releases and no activity on GitHub since 2018. It requires webpack 2+ and extract-text-webpack-plugin 2+. Useful for combining CSS from multiple entries, but limited to legacy webpack setups. Alternative: mini-css-extract-plugin (webpack 4+).

Common errors

error Error: Cannot find module 'merge-files-webpack-plugin' ↓

cause Package not installed or mistyped as 'merge-text-webpack-plugin' (see README error).

fix

Run: npm install merge-files-webpack-plugin --save-dev (correct name).

error TypeError: MergeFilesPlugin is not a constructor ↓

cause Using named import instead of default import in a CommonJS context.

fix

Use: const MergeFilesPlugin = require('merge-files-webpack-plugin');

Warnings

deprecated extract-text-webpack-plugin is deprecated in webpack 4+; use mini-css-extract-plugin instead. ↓

fix Migrate to mini-css-extract-plugin and remove merge-files-webpack-plugin (mini-css-extract-plugin supports merging via configuration).

gotcha The filename option in MergeFilesPlugin must not include [name] or other webpack placeholders; it is the final output filename. ↓

fix Use a static string like 'css/bundle.css' instead of '[name].bundle.css'.

gotcha If test option is omitted, it defaults to the filename value. This can cause incorrect files to be merged if filename is not specific enough. ↓

fix Always provide an explicit test (RegExp or string) that matches only the files you intend to merge.

Install

npm install merge-files-webpack-plugin

yarn add merge-files-webpack-plugin

pnpm add merge-files-webpack-plugin

Imports

MergeFilesPlugin
```
const MergeFilesPlugin = require('merge-files-webpack-plugin');
```
CommonJS usage typical for webpack configs; no ESM or TypeScript types available.

MergeFilesPlugin

wrong

import { MergeFilesPlugin } from 'merge-files-webpack-plugin';

correct

import MergeFilesPlugin from 'merge-files-webpack-plugin';

This package uses a default export, so named import will fail.

Quickstart

Merges per-entry CSS files from extract-text-webpack-plugin into one combined.css, deleting intermediate files.

const path = require('path');
const MergeFilesPlugin = require('merge-files-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    a: './src/entryA.js',
    b: './src/entryB.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({ use: 'css-loader' })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ filename: '[name].style.css' }),
    new MergeFilesPlugin({
      filename: 'combined.css',
      test: /\.css$/,
      deleteSourceFiles: true
    })
  ]
};