# trekels-webpack-concat-plugin

> Webpack file concatenation.

Latest version **4.1.6** (published 2022-10-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install trekels-webpack-concat-plugin
pnpm add trekels-webpack-concat-plugin
yarn add trekels-webpack-concat-plugin
bun add trekels-webpack-concat-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.6 |
| Published | 2022-10-03 |
| First published | 2022-10-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 14 |
| Dependencies | 3 |
| Unpacked size | 22.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | mcler |
| Maintainers | vincent_trekels |
| Keywords | webpack, concat, legacy |

## Links

- npm: https://www.npmjs.com/package/trekels-webpack-concat-plugin
- Repository: https://github.com/trekels/webpack-concat-plugin
- Homepage: https://github.com/mcler/webpack-concat-plugin
- Issues: https://github.com/trekels/webpack-concat-plugin/issues
- npm.io page: https://npm.io/package/trekels-webpack-concat-plugin

## Dependencies (3)

- [upath](https://npm.io/package/upath.md) ^2.0.1
- [globby](https://npm.io/package/globby.md) ^8.0.1
- [schema-utils](https://npm.io/package/schema-utils.md) ^4.0.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 4.1.6 (latest) — 2022-10-03

## README

# @mcler/webpack-concat-plugin

[![npm package](https://img.shields.io/npm/v/@mcler/webpack-concat-plugin.svg)](https://www.npmjs.org/package/@mcler/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`](https://github.com/jantimon/html-webpack-plugin))

> Only Webpack 5 is supported

> Forked from [hxlniada’s plugin](https://github.com/hxlniada/webpack-concat-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](https://github.com/hxlniada/webpack-concat-plugin) is use of Webpack mechanisms for minification and creating source maps.

### `webpack.config.js` mode option

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

### `webpack.config.js` detailed configuration

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

## Options

### `name`

`string = "result"`

Output chunk name.

### `publicPath`

`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
<script src="{publicPath}/{fileName}" />
```

### `outputPath`

`string = ""`

Output directory of the file.

### `fileName`

`string = "[name].js"`

Output file name.

### `filesToConcat` *required*

`string[]`

Array of file paths to concat. Supported path patterns:

- normal path
- npm packages
- [glob](https://github.com/sindresorhus/globby) patterns

### `injectType`

`string = "prepend": "prepend" | "append" | "none"`

How to inject script tags (only works if `html-webpack-plugin` has `inject` option set to `false`)

### `attributes`

`Record<string, boolean | string>`

Extra attributes applied to script tag.

```jsx
{
  async: false,
  defer: true,
  crossorigin: "anonymous"
}
```

## Examples

### Manual inject into HTML

```html
<script src="<%= htmlWebpackPlugin.files.webpackConcat.file %>"></script>
```

---
_Source: https://npm.io/package/trekels-webpack-concat-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._