1.1.0 • Public • Published

File Merge Webpack Plugin

A fork of merge-files-webpack-plugin


  • Supports use of [hash], [contenthash] in the filename
  • Orders assets by chunk order before merge
  • deleteSourceFiles accepts a RegExp, to allow a subset of files to be deleted
  • Includes the file in the compilation stats (supports assets-webpack-plugin, should support others too)


This is a small plugin created to merge files extracted by the extract-text-webpack-plugin into a single one. It is useful, for example, when you have multiple entries in your webpack configuration and you use the extract-text-webpack-plugin plugin to extract all the .css files into a separate one. Without this plugin, extract-text-webpack-plugin will extract a .css file per entry (if you use have set the filename as [name].css) or in the worst case a single file with only the .css file of the last entry (if you have set the filename as style.css).

With this plugin, you can extract all the .css files from all entries into a single .css file.



npm install file-merge-webpack-plugin --save-dev

You need to use webpack 2+ and extract-text-webpack-plugin 2+. The filename for the extract-text-webpack-plugin has to use [name].something.ext where something.ext is the name that will be used in the test option of this plugin.

A sample file would be:

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

module.exports = {
    entry: {
        'entry1': './tests/test1/src/entry1/index.js',
        'entry2': './tests/test1/src/entry2/index.js'
    output: {
        path: path.join(__dirname, './tests/test1/public'),
        filename: '[name].js'
    module: {
        rules: [
                use: ExtractTextPlugin.extract({
                    use: 'css-loader'
                test: /\.css$/,
                exclude: /node_modules/
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].style.css'
        new MergeFilesPlugin({
            filename: 'css/style.css',
            test: /style\.css/, // it could also be a string
            deleteSourceFiles: true

The config object passed to MergeFilesPlugin admits:

  • filename: Final name of the file created by merging the files. The file will be saved in the output path. You can add extra path in front of the filename. Required. String.
  • test: Test applied to the different files created by webpack to see which should be merged. For the previous example, the files created by webpack with ExtractTextPlugin will be entry1.js,, entry2.js and We are interested in and that are created by the ExtractTextPlugin plugin. As such, a good test will be style.css or /\.css/ if you want to use RegExp. Optional. If it is not specified, filename is used.
  • deleteSourceFiles: If true, and will be deleted. If false, they will be created. If not specified, by default is setted to true.




Package Sidebar


npm i file-merge-webpack-plugin

Weekly Downloads






Last publish


  • adam-26