webpack-concat-plugin


> A plugin to help webpack concat js and inject into html

$3

Webpack is really powerful. However, when I want to concat the static files and inject into html without webpack JSONP code wrapper, it seems impossible to do that without other tool's help.

$3

``
npm install webpack-concat-plugin --save-dev
`
for webpack >= 4.0
`
npm install webpack-concat-plugin@3.0.0 --save-dev
`

$3

- Concat
- Inject to html(with html-webpack-plugin)

$3

`javascript
const ConcatPlugin = require('webpack-concat-plugin');

new ConcatPlugin({
...see options
// examples
uglify: false,
sourceMap: false,
name: 'result',
outputPath: 'path/to/output/',
fileName: '[name].[hash:8].js',
filesToConcat: ['jquery', './src/lib/', './dep/dep.js', ['./some/', '!./some/excludes/**']],
attributes: {
async: true
}
});

`

$3

#### uglify [boolean | object] default: false
if true the output file will be uglified

or set uglifyjs options to customize the output

#### sourceMap [boolean] default: false
if true, will output sourcemap

#### name [string] default: "result"
it's useful when you want to inject to html-webpack-plugin manully

#### publicPath [string|boolean] default: webpack's publicPath
if set, will be used as the public path of the script tag.

if set to false, will use relativePath.

#### outputPath [string]
if set, will be used as the output directory of the file.

#### fileName [string] default: [name].js
if set, will be used as the output fileName

#### filesToConcat [array] required
supported path patterns:
* normal path
* npm packages
* glob

#### injectType ["prepend"|"append"|"none"] default: "prepend"
how to auto inject to html-webpack-plugin(only if html-webpack-plugin set inject option not to be false)

#### attributes [object]
if set, will be used as the extra attributes of the script tag.

$3

`
doctype html
...
script(src=htmlWebpackPlugin.files.webpackConcat.flexible)
...
``

$3

- [ ] add css support
- [x] auto inject to html