combine

index.js

Combine multiple webpack parts into a webpack config. A part is either an object, which will be merged in to the config, or it is a function that takes the config as it is and is expected to return a new version of the config. The parts are resolved in the order they are provided. There is a small base config that combine starts with that looks like this:

{
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    publicPath: '/'
  }
}
combine(parts: Array<(Object | Function)>): Object
Parameters
parts (Array<(Object | Function)>) Array of webpack config objects or functions
Returns
Object: Combined Webpack config object
Example
// webpack.config.js
const parts = require('webpack-parts')

module.exports = parts.combine(
  {
    entry: "app/index.js",
    output: {
      path: "build"
    }
  },
  parts.load.js(),
  parts.load.css(),
  parts.dev.sourceMaps(),
  parts.optimize.minimize()
)

load.css

index.js

Use postcss to process css.

load.css($0: Object)
Parameters
$0 (Object (default {}) )
Name Description
$0.include [(string | Array)] Webpack include conditions
$0.postcssOptions [Object] postcss-loader options
$0.extractFilename [string] Path to extract css to using extract-text-webpack-plugin when NODE_ENV=production

load.js

index.js

Use babel to process js.

load.js($0: Object)
Parameters
$0 (Object (default {}) )
Name Description
$0.include [(string | Array)] Webpack include conditions
$0.basePath [string] The base path to which js files will be emitted. It's essentially a prefix to fileName and chunkFilename

load.images

index.js

Include images via urls.

load.images($0: Object)
Parameters
$0 (Object (default {}) )
Name Description
$0.include [(string | Array)] Webpack include conditions
$0.imageOptions [Object] Options to pass to image-webpack-loader
$0.basePath [string] The base path to which images files will be emitted.
$0.inlineLimitBytes [number] If set, inline images that are smaller than $0.inlineLimitBytes when NODE_ENV === 'production'

output.vendorNodeModules

index.js

Extract all used dependencies from node_modules into a separate vendor.js. By default, it will consider all dependencies used by all entry points, but you override this by specifying $0.chunks.

output.vendorNodeModules($0: Object)
Parameters
$0 (Object)
Name Description
$0.name [string] Name of vendor chunk
$0.chunks [Array<string>] Array of entry chunk names to consider when looking for used node_modules .

setup.copyEnv

index.js

Make environment variables available via process.env while building. The variables are copied from the current environment at build time. If you want to set environment variables to something other to what they actually are in the current environment, use setEnv. Makes use of webpack.EnvironmentPlugin.

setup.copyEnv(vars: Array<string>)
Parameters
vars (Array<string>) The names of environment variables to make available.

setup.setEnv

index.js

Make environment variables available via process.env while building. The variables are set explicitly as specified in env. Note that you should not JSON.stringify the values, that will be done for you. Makes use of webpack.DefinePlugin

setup.setEnv(env: Object)
Parameters
env (Object) An object whose keys are the names of environment variables and whose values are the values to set. These should be plain JSON objects.

dev.analyze

index.js

Use webpack-bundle-analyzer to analyze bundle size. Opens a web browser with a visual graph of bundled modules and their sizes

dev.analyze()

dev.hotModuleReloading

index.js

Enable hot module reloading when NODE_ENV !== 'production'

dev.hotModuleReloading($0: Object)
Parameters
$0 (Object (default {}) )
Name Description
$0.useReactHotLoader [boolean] Set to true if you're using react-hot-loader . Adds react-hot-loader/patch to each entry.
$0.useWebpackHotMiddleware [boolean] Set to true if you're using webpack-hot-middleware . Adds webpack-hot-middleware/client to each entry.
$0.webpackDevServerUrl [boolean] Set to url such as http://localhost:3000 if you're using webpack-dev-server . Adds webpack-dev-server/client and webpack/hot/only-dev-server to each entry. Should not be used with useWebpackHotMiddleware .

dev.sourceMaps

index.js

Enable source maps. Uses different options depending on NODE_ENV.

dev.sourceMaps($0: Object)
Parameters
$0 (Object (default {}) )
Name Description
$0.development [string](default 'cheap-module-source-map') devtool to use in development. Defaults to cheap-module-source-map
$0.production [string](default 'source-map') devtool to use in production. Defaults to source-map

optimize.forceSingleLodash

index.js

Force to a single version of lodash across all dependencies. Lodash is big and we don't want to include it or its bits more than once. This is probably safe as long as there are no mixed major versions and the most recent version of lodash is the one forced.

optimize.forceSingleLodash(lodashPath: string)
Parameters
lodashPath (string) Absolute path to lodash module
Example
parts.optimize.forceSingleLodash(require.resolve('lodash'))

optimize.minimize

index.js

Minimize javascript code using uglify and configure all other loaders to minimize and disable debug if NODE_ENV === 'production'.

optimize.minimize()

optimize.removeMomentLocales

index.js

Do not include any of moment's locales. If we don't do this, they are all included and add 23kb min+gzip. You probably shouldn't use this if you need to support other locales.

optimize.removeMomentLocales()

ui.progressBar

index.js

Enable progress bar when building at the command line.

ui.progressBar()