Get StartedContribute


Edit this Page  

You may have noticed that few webpack configurations look exactly alike. This is because webpack's configuration file is a JavaScript file that exports an object. This object, is then parsed by webpack based upon its defined properties.

The following examples below describe how webpacks configuration object can be both expressive and configurable because it is code:

The simplest of examples


module.exports = {
  entry: './foo.js',
  output: {
    path: 'dist',
    filename: 'foo.bundle.js'

Generating multiple targets and configs and exporting the entire array


var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');

var baseConfig = {
  target: 'async-node',
  entry: {
    entry: './entry.js'
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist')
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'inline',
      filename: 'inline.js',
      minChunks: Infinity
    new webpack.optimize.AggressiveSplittingPlugin({
        minSize: 5000,
        maxSize: 10000

let targets = ['web', 'webworker', 'node', 'async-node', 'node-webkit', 'electron-main'].map((target) => {
  let base = webpackMerge(baseConfig, {
    target: target,
    output: {
      path: path.resolve(__dirname, './dist/' + target),
      filename: '[name].' + target + '.js'
  return base;

module.exports = targets;
The most important part to take away from this document is that there are many different ways to format and style your webpack configuation. The key is to stick with something consistent that you and your team can understand and maintain.

Using TypeScript to create a class which the angular-cli uses to generate configs


import * as webpackMerge from 'webpack-merge';
import { CliConfig } from './config';
import {
} from './';

export class NgCliWebpackConfig {
  // TODO: When webpack2 types are finished lets replace all these any types
  // so this is more maintainable in the future for devs
  public config: any;
  private webpackDevConfigPartial: any;
  private webpackProdConfigPartial: any;
  private webpackBaseConfig: any;
  private webpackMobileConfigPartial: any;
  private webpackMobileProdConfigPartial: any;

  constructor(public ngCliProject: any, public target: string, public environment: string, outputDir?: string) {
    const config: CliConfig = CliConfig.fromProject();
    const appConfig = config.config.apps[0];

    appConfig.outDir = outputDir || appConfig.outDir;

    this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root, environment, appConfig);
    this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root, appConfig);
    this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root, appConfig);

    if (appConfig.mobile){
      this.webpackMobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, appConfig);
      this.webpackMobileProdConfigPartial = getWebpackMobileProdConfigPartial(this.ngCliProject.root, appConfig);
      this.webpackBaseConfig = webpackMerge(this.webpackBaseConfig, this.webpackMobileConfigPartial);
      this.webpackProdConfigPartial = webpackMerge(this.webpackProdConfigPartial, this.webpackMobileProdConfigPartial);


  generateConfig(): void {
    switch (this.target) {
      case "development":
        this.config = webpackMerge(this.webpackBaseConfig, this.webpackDevConfigPartial);
      case "production":
        this.config = webpackMerge(this.webpackBaseConfig, this.webpackProdConfigPartial);
        throw new Error("Invalid build target. Only 'development' and 'production' are available.");

Using JSX (React JS Markup) and Babel to create a JSON Configuration that webpack can understand. (Courtesy of Jason Miller)

import h from 'jsxobj';

// example of an import'd plugin
const CustomPlugin = config => ({
  name: 'custom-plugin'

const CONFIG = (
  <webpack target="web" watch>
    <entry path="src/index.js" />
      <alias {...{
        react: 'preact-compat',
        'react-dom': 'preact-compat'
      }} />
      <uglify-js opts={{
        compression: true,
        mangle: false
      }} />
      <CustomPlugin foo="bar" />

document.body.textContent = JSON.stringify(CONFIG, 0, '  ');