Socket
Socket
Sign inDemoInstall

webpack-concat-plugin

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

webpack-concat-plugin

Webpack file concatenation.


Version published
Weekly downloads
16K
increased by4.58%
Maintainers
1
Weekly downloads
 
Created
Source

webpack-concat-plugin

Build Status npm package npm downloads

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

FAQs

Package last updated on 08 Jun 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc