library-extend-webpack-plugin

A webpack plugin that changes the output to an extended library and add it to an existing global library.

Install

npm i -D library-extend-webpack-plugin

Usage

In your webpack configuration (webpack.config.js):

const LibraryExtendWebpackPlugin = require("library-extend-webpack-plugin");

module.exports = {
    mode: 'production',
    entry: {
        'lib.extend': './src/index.js',
    },
    output: {
        library: 'LIB',
        libraryTarget: 'var',
        filename: '[name].js',
    },
    //...
    plugins: [
        new LibraryExtendWebpackPlugin()
    ]
}

Notice the use of output.library and output.libraryTarget, which indicates a library is being built and the bundle will expose it via a scoped variable named LIB.

NOTE: the value for output.library must as same as the existing global library which you want to add to.

NOTE: the value for output.libraryTarget must be var or umd or jsonp.

Example

Given the above Usage example:

Entry File: index.js

export { default as horn } from './lib/horn';

export { default as bark } from './lib/bark';

Output Bundle

Object.assign(LIB,/******/ (function(modules) {/* webpack bundle code */}));

Function horn and bark are added to global library LIB.

And LIB.horn and LIB.bark work well.

Options

Polyfill

If the browser does not support Object.assign, you can add polyfill as bellow,

new LibraryExtendWebpackPlugin({ polyfill: true })

Exclude

If you want to exclude some files, you can add exclude as bellow,

new LibraryExtendWebpackPlugin({ 
    exclude: function (fileName) {
        return !/\.[tj]s$/i.test(fileName);
    }
})

promptType

Its value can be 'warn' or 'error'. The default value is 'warn'.

'warn': use console.warn.
'error': use console.error and throw an error.

new LibraryExtendWebpackPlugin({ 
    promptType: 'error'
})

debug

Its value should be boolean. The default value is false.

true: It will console log the file as extended library.

new LibraryExtendWebpackPlugin({ 
    debug: true
})

Example of usage on the Browser

For example, the global library file is lib.js, and the output js file we generate with this plugin is lib.extend.js.

NOTE: Only lib.extend.js is generated in this example.

In the browser:

<script src="https://cdn.xx.com/lib.js"></script>
<script src="https://cdn.xx.com/lib.extend.js"></script>

If we use jquery as an example, it will be

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>