Concatenate and transform files using Webpack
Install the plugin with npm:
$ npm install webpack-concat-files-plugin --save-dev
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',
},
],
}),
],
};
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;
},
},
},
],
}),
],
};
The options
object can contain the following properties:
bundles
: (Array) List of bundle objectsseparator
: (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, defaulttrue
)allowOptimization
: (Boolean) Determines whether Webpack should optimize concatenated bundles according to its optimization configuration. Webpack 5 only. (Optional, defaultfalse
)
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'
)
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)
The following options have been deprecated and will be removed in a future release:
bundle.source
: (String or Array) Replaced withbundle.src
. See documentation above.bundle.destination
: (String) Replaced withbundle.dest
. See documentation above.
webpack-concat-files-plugin
is compatible with Webpack 4 and Webpack 5:
Webpack 4 | Webpack 5 |
---|---|
4.40.x or greater |
5.x or greater |
Special thanks to everybody who's contributed to this project!
@davidwarrington | @Iszacsuri | @jarrettgreen | @wagoid |
---|