Webpack file concatenation.
npm install @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
```
npm install @mcler/webpack-concat-plugin --save-dev
``
yarn add @mcler/webpack-concat-plugin --dev
`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
}
});
Key difference of this plugin from original version is use of Webpack mechanisms for minification and creating source maps.
`jsx`
module.exports = {
// skipping full config...
mode: 'production'
};
`jsx`
module.exports = {
// skipping full config...
optimization: {
minimize: true,
minimizer: new TerserPlugin(), // or anything you like
},
devtool: 'source-map'
};
string = "result"
Output chunk name.
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`
string = ""
Output directory of the file.
string = "[name].js"
Output file name.
string[]
Array of file paths to concat. Supported path patterns:
- normal path
- npm packages
- glob patterns
string = "prepend": "prepend" | "append" | "none"
How to inject script tags (only works if html-webpack-plugin has inject option set to false)
Record
Extra attributes applied to script tag.
`jsx`
{
async: false,
defer: true,
crossorigin: "anonymous"
}
`html``