@chargeover/webpack-concat-plugin


A plugin to concat static JavaScript files and (optionally) inject into HTML without Webpack’ JSONP code wrapper. A perfect solution for bundling legacy code.

It delivers:

- Concatination of files
- Source maps
- Minification
- Support for webpack@5 and html-webpack-plugin@5
- Inject to HTML (via html-webpack-plugin)

> Only Webpack 5 is supported

> Forked from mcler’s forked plugin – supports Webpack 4

Install

``
npm install @mcler/webpack-concat-plugin --save-dev
`

`
yarn add @mcler/webpack-concat-plugin --dev
`

Use

`jsx
const ConcatPlugin = require('@mcler/webpack-concat-plugin');
new ConcatPlugin({
name: 'result',
outputPath: 'path/to/output/',
fileName: '[name].[hash:8].js',
filesToConcat: [
'jquery',
'./src/lib/**',
'./dep/dep.js',
[
'./some/**',
'!./some/excludes/**'
]
],
attributes: {
async: true
}
});
`

Minification and Source maps

Key difference of this plugin from original version is use of Webpack mechanisms for minification and creating source maps.

$3

`jsx
module.exports = {
// skipping full config...
mode: 'production'
};
`

$3

`jsx
module.exports = {
// skipping full config...
optimization: {
minimize: true,
minimizer: new TerserPlugin(), // or anything you like
},
devtool: 'source-map'
};
`

Options

$3

string = "result"

Output chunk name.

$3

string | false = webpack.publicPath

Public path to asset. If publicPath is set to false, then relativePath will be used. publicPath will affect script tags:

`jsx

``