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 🙏

© 2025 – Pkg Stats / Ryan Hefner

infrastructure-webpack

v1.0.1

Published

Installation ============

Downloads

6

Readme

Installation

npm install infrastructure-webpack

Configuration

This module works with infrastructure (https://github.com/shstefanov/infrastructure). It means that configuration should looks something like:

Engine configuration (config.webpack):

{
  "buildDestination": "./public/dist", // Required - where bundle builds will be placed
  "publicPath":       "/public/dist",  // TODO

  "watch":            false,           // Optional - watch changes anr rebuild bundles, default false
  "progress":         false,           // Optional - turn on and off progress reporting, default false
  "sourceMap":        false,           // Optional - add source map to bundles, default false, default false
  "colors":           true,            // Optional - use or not colored output when reporting, default false
  "minify":           true,            // Optional - minify or not the code, default false

  // How to report some stuff
  // It means some structure target will be called
  // 2 parameters will be passed to structure target
  // [ title, message ], without callback
  "reportProgress":   "log.info",      // Optional - defaults to "log.info"
  "reportSummary":    "log.info",      // Optional - defaults to "log.sys"
  "reportErrors":     "log.error",     // Optional - defaults to "log.error"
  "reportWarnings":   "log.warning",   // Optional - defaults to "log.warning"

  // It is per instance option, this is used as global config
  // in case some of instances don't have this option set
  // Read instance options for more
  "commonLoaders":    true,


  // Optional. If set, it will setup webpack's CommonsChunkPlugin
  // And will extract defined in the array libs in separate bundle,
  // named in this case "libs_bundle_name"
  "commonChunks": {
    "libs_bundle_name" : [
      "underscore",
      "backbone",
      "jquery"
    ]
  },

  // Optional
  // Define some aliases. It means that in your bundle files
  // require("key") will resolve defined path as follows:
  //   - paths with leading "./" will be resolved based on project root
  //   - paths with leading "/" will be resolved as is
  //   - paths starting with word will be resolved from node_modules packages
  // Note: paths that leading to folder wil be autoaliased.
  // It means the files inside target folder can be resolved like:
  // require("lib/controlers/MainController.js")
  "alias": {
    "settings":  "./bundles/lib/settings.js",
    "resources": "./bundles/resources",
    "View": "infrastructure-appcontroller-ractive/ractive-backbone-view.js",
    "lib":  "./bundles/lib"
  },

  // Optional - defaults to "/".
  // This affects only autoaliased targets.
  // If aliasSeparator is defined as "--", autoaliased target will be resolved as:
  // require("lib--controlers--MainController.js")
  "aliasSeparator": "/",


  // Optional.
  // Extract specific file types to specific destination
  "fileLoaders": [
    {
      "extensions": ["gif","jpe?g","png","svg","bmp"],
      "destination": "images/[name].[hash].[ext]"
    },
    {
      "extensions": ["woff","woff2","eot","ttf"],
      "destination": "fonts/[name].[hash].[ext]"
    }
  ],

  // Optional.
  // If defined, it will use webpack's DefinePlugin to 
  // expose some values inside bundle files.
  // It can resove it's value from config tree as:
  "define": "@config.bundles",

  // Or can be defined more specific with option every child unit
  // it resolve it's value from config tree or from ENV variables,
  // if value is string, leading with "@config" or "@env", otherwise 
  // will just pass the value
  "define": {
    "ADMIN_CONFIG":   "@config.bundles.ADMIN_CONFIG",
    "DEFAULT_ROUTES": "@config.bundles.DEFAULT_ROUTES",
    "HOST":           "@env.HOST",
    "BAR":            "normal string",
    "BAZ":            ["other json"]
  }


}

Structure configuration:

Under config.structures.your_structure_name, set the following:

{
  // Required - which engine to load in this structure
  "engine":   "infrastructure-webpack/engine",
  // or:
  "engines":  ["infrastructure-webpack/engine"],
  

  // Optional.
  // Standart structure option.
  // It uses bulk-require package to resolve some pattern
  // It can not be defined, if "instances" object is defined
  // to configure structure units
  "path":   "bundles",
  // or
  "path":   ["bundles", "*.js"    ],
  // To be more specific


  // Optional - unit definitions, using structure.instances config
  "instances": {
    
    // Unit name
    "admin": {

      // Required - prototype to extend
      // and again:
      // - paths with leading "./" will be resolved based on project rot folder
      "prototype": "./lib/bundles/BaseBundle.js",
      // - paths with leading "/" will be resolved as is
      "prototype": "/var/www/app/lib/bundles/BaseBundle.js",
      // - paths starting with word will be resolved from node_modules packages
      "prototype": "npm-dependency-name",


      // Required - target folder, relative to structure.path folder
      "target": "./admin",


      // Optional
      // The bundle may depend on packages, that are extracted 
      // from CommonChunksPlugin in separate bundle, so in order to work
      // properly, the bundle should have needed lib-chunks name in this array
      // The lib_bundle assets will be added to this chunk assets
      "chunks": [ "libs_bundle_name" ],


      // Optional - custom scripts and styles to be loaded with this bundle assets
      "assets": {
        "javascript": ["url_1", "url_2"],
        "styles":     ["url_3", "url_4"],
      },


      // Optional - bundle specific custom aliases, relative to target folder
      "alias": {
        "admin.data": "data.js"
      },


      // Optional
      // If set to true, the bundle's target directory will be 
      // autoaliasified with unit name as prefix
      "aliasify": true,

      // Optional - uses config.webpack.aliasSeparator as default
      // Which separator to use for this bundle files
      // if aliasify option is true 
      "aliasSeparator": "/",

      // Optional - defaults false
      // If true, it adds some loaders to this bundle loaders
      // - loader for loading .coffee files
      // - loader for loading .html files as string
      // - loader for loading .jade files as html string
      // - loaders for loading .json, .hson and .yml files as json objects
      // - loaders for loading .css, .less, .scss files
      "commonLoaders" : true,


      // Optional - some custom loaders
      // Note - infrastructure-webpack constructor will modify test regex 
      // to match files in bundle's target directory only.
      // Also, in json format, test regex should be string and may be tricky

      "loaders": [
        {"test": "/\.jsx$/", "loader": "babel-loader"}
      ]



    }
    
  }
}

Same unit definition, but using javascript file in structure.path directory

// bundles/admin.js
var Bundler = require("../lib/bundles/BaseBundle.js");
module.exports = Bundler.extend("AdminBundler", {
  target: "./admin",
  chunks: [ "libs_bundle_name" ],
  assets: {
    javascript: ["url_1", "url_2"],
    styles:     ["url_3", "url_4"],
  },
  alias: {
    "admin.data": "data.js"
  },
  aliasify: true,
  loaders: [
    { test: /\.jsx$/, loader: "babel-loader" }
  ]
    });