npm install infrastructure-webpack
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" }
]
});