html-webpack-concat-plugin v3.0.2

webpack-concat-plugin

A plugin to help webpack concat js and inject into html

Why

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.

Install

npm install webpack-concat-plugin --save-dev

for webpack >= 4.0

npm install webpack-concat-plugin@3.0.0 --save-dev

Features

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

Usage

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
    }
});

Options

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.

Examples

Inject to html by hand

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

TODO

• add css support
• auto inject to html