npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

merge-webpack-plugin

v0.2.1

Published

Webpack plugin with loader to merge sources

Downloads

467

Readme

npm travis-cl coverage

merge plugin for webpack

Webpack plugin with loader for merge sources

This is webpack plugin produces single asset for set of files or multiple assets with grouping technique. The set of files may be splited to groups of set of files that produce group of assets.

Advantages:

  • deep webpack integration
  • possibility to group files by simple criterion
  • autorebuild and reload on source file change (due to deep integration)
  • files may be loaded and joined by path pattern or by call function require or import

To build internationalization locale assets consider to use also the intl-webpack-plugin

If need some like this merge plugin but more specifical - fork this plugin and read more about: join-webpack-plugin (from which this merge plugin is derived).

Install

npm install --save-dev merge-webpack-plugin

Webpack configuration

This is minimal configuration to merge json into single asset:

var MergePlugin = require("merge-webpack-plugin");
module.exports = {
  module: {
    rules: [
      { test: /\.(json)$/i,
        use: [
          MergePlugin.loader()
        ]
      },
      // another formats to merge is possible with loaders
      { test: /\.(yaml)$/i,
        use: [
          MergePlugin.loader(),
          'yaml-loader'
        ]
      },
    ]
  },
  plugins: [
    new MergePlugin({
      search: './src/**/*.json',
    })
  ]
}

Requiring

var url1 = require("one-of-files.json");
// and/or if preloaders specified, for example 'yaml-loader'
var url2 = require("another-file.yaml");
require("third-file.yaml");
// or describe files by pattern in plugin param

// url1 and url2 will be same name refers to same file
// which will also contain content of "third-file.yaml"

Same in modern syntax:

import url1 from "one-of-files.json"
import url2 from "another-file.yaml"
import "third-file.yaml"
// or describe files by pattern in plugin param

This returns public url of file with result of merging. This will be same url for each file merged together according to plugin configuration.

In order to involve files into merge, files must be required by require function of import or configured by search param of plugin configuration.

Plugin configuration

MergePlugin typically created at webpack configuration file and wait hash of configuration options as its create param:

var MergePlugin = require("merge-webpack-plugin");

var merge = new MergePlugin({
  search: 'glob' || ['globs',...],
  skip: 'substr' || /regexp/ || [ 'substr', /regex/, ...],
  group: '[name]',
  sort: true || false, // Default false
  name: '[name].[hash].[ext]',
});

Options:

  • search - glob pattern or pattern array to find and prefetch see glob module for reference
  • skip - substring or regular expression or array to skip some from searched results
  • group - default group loader option (see below)
  • sort - sort output by keys to avoid change [hash]
  • name - default name loader option (see below)

The search param works like multi-require with glob patterns. Only files that required by require function in code will be loaded in that case.

Any file that does not match to search or skip param and match to loader section in webpack config and is required in code by function require or import will be loaded and merged anyway.

Loader configuration

The loader() method includes merge loader into loader chain.

var MergePlugin = require("merge-webpack-plugin");
var theMerge = new MergePlugin({...})

{
  module: {
    rules: [
      { test: /\.(json)$/i,
        use: [
          theMerge.loader({group:'[name]'}),
         // some more pre loaders
        ]
      }
    ]
  }
  plugins: [
     theMerge
  ]
}

Preliminary loaders must be applied before merge loader. This means that merge loader must be final loader in loaders chain.

Loader function waits hash of configuration options as its param. Default values of loader may be specified in plugin configuration described above.

Loader options:

  • group - devides files into separated assets by specifying groping pattern. May include template placeholders described below in groupping section. Grouping is not applied if value is not specified.
  • name - specifies destination asset file name. String value may include template placeholders described below. Default value is [hash].

Configuration values specified directly in loader() override same values specified as default in plugin configuration.

The loader() function may be invoked as class function if only one plugin instance is passed to config. Therefore it is better to use object form instead of class form:

var theMerge = new MergePlugin({...})

loaders: [
  // this form valid only for single plugin instance:
  MergePlugin.loader(),
  // to avoid problems better to use always object form:
  theMerge.loader(),
],

Grouping

Files may be grouped by simple criterion. Grouping criterion is specified in group loader param. If group param is not specified than will be only one common group where will be all files joined togather.

Grouping criteria formed by template placeholders described in interpolateName() from loader-utils module. Some of that is:

  • [name] - to group files with same name set group param:
  • [ext] - to group files with same ext set group param:
  • [path] - to group files where each group contains files from same directory:

And any derivative combinations.

LICENSE

MIT