You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

webpack-concat-files-plugin

Package Overview
Dependencies
4
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

webpack-concat-files-plugin

Concatenate and transform files using Webpack


Version published
Maintainers
1
Created

Changelog

Source

[0.5.2] - 2021-02-25

Fixed

  • Issue causing before transform callback's second parameter to be undefined

Changed

  • Improved Terser example in README.md

Readme

Source

webpack-concat-files-plugin

Concatenate and transform files using Webpack

NPM

Installation

Install the plugin with npm:

$ npm install webpack-concat-files-plugin --save-dev

Basic Usage

The example below concatenates all JavaScript files found within a hypothetical scripts/polyfills directory, and outputs the bundled file to dist/polyfills.min.js.

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

const webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js',
  },
  plugins: [
    new WebpackConcatPlugin({
      bundles: [
        {
          dest: './dist/polyfills.min.js',
          src: './scripts/polyfills/**/*.js',
        },
      ],
    }),
  ],
};

Transformations

The contents of concatenated files can be modified (e.g., using minifiers and transpilers) and used in the concatenated output. These modifications are called transformations.

Each bundle can specify a transforms property, which can contain a before callback and an after callback. The before callback is called on each file before it is concatenated, and the after callback is called after concatenation has occurred.

The example below demonstrates how Terser could be used to minify the output of a concatenated bundle.

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

const webpackConfig = {
  // ...
  plugins: [
    new WebpackConcatPlugin({
      bundles: [
        {
          src: './scripts/polyfills/**/*.js',
          dest: './dist/polyfills.min.js',
          transforms: {
            after: async (code) => {
              const minifiedCode = await terser.minify(code);
              return minifiedCode.code;
            },
          },
        },
      ],
    }),
  ],
};

Options

The options object can contain the following properties:

  • bundles: (Array) List of bundle objects
  • separator: (String) Separator inserted between concatenated content (Optional, default '\n')
  • allowWatch: (Boolean) Determines whether bundles should be watched and automatically concatenated when using Webpack's watch mode (Optional, default true)
  • allowOptimization: (Boolean) Determines whether Webpack should optimize concatenated bundles according to its optimization configuration. Webpack 5 only. (Optional, default false)

Bundles

Each object specified in the bundles array can contain the following properties:

  • bundle.src: (String or Array) Glob string or array of glob strings describing files to concatenate.
  • bundle.dest: (String) Output path for concatenated file.
  • bundle.transforms: (Object) Object describing transformations of concatenated files. (Optional)
  • bundle.encoding: (String) Encoding to use when reading files. (Optional, default 'utf8')

Transforms

The object specified for each transforms bundle property can contain any of the following properties:

  • transform.before(content, filepath): (Callback) Function to apply changes to file contents before concatenation. Accepts two string parameters: the contents of the file being concatenated, and the path to the source file being concatenated. The string returned by this function is used for the concatenated output. (Optional)
  • transform.after(content): (Callback) Function to apply changes to file contents after concatenation. Accepts a single string parameter containing the contents of the concatenated files, and the string returned by this function is used as the final concatenation output. (Optional)

Deprecated Options

The following options have been deprecated and will be removed in a future release:

  • bundle.source: (String or Array) Replaced with bundle.src. See documentation above.
  • bundle.destination: (String) Replaced with bundle.dest. See documentation above.

Compatibility

webpack-concat-files-plugin is compatible with Webpack 4 and Webpack 5:

Webpack 4Webpack 5
4.40.x or greater5.x or greater

Contributors

Special thanks to everybody who's contributed to this project!

@davidwarrington@Iszacsuri@jarrettgreen@wagoid

Keywords

FAQs

Package last updated on 25 Feb 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc