Webpack Configuration

A full webpack configuration is complex, so we maintain a standard configuration in starter-kit and set simple options through a getConfig() function in webpack.config.js. It looks like this:

webpack.config.js

// Include dependencies
require('babel-register');
const getConfig = require('./other/webpack.config.es6');

/**
 * Configure your webpack setup here. These settings can be changed at any time.
 *
 * Read more on the wiki:
 * https://git.empdev.domo.com/AppTeam6/da-webpack/wiki/Webpack-Configuration -- this page!
 */
module.exports = getConfig({
  includeDesktopView: true,
  includeMobileView: true,
  externals: {
    // Include your app's extra externals here
  },
  loaders: [
    // Include your app's extra loaders here
  ]
});

Configuration Options

Pass these options into getConfig().

includeDesktopView

Sets whether your app should build and export a desktop view.

Default: true

includeMobileView

Sets whether your app should build and export a mobile view.

Default: true

externals

Add other webpack externals here. They will be merged into the map of standard externals that every app includes:

• angular
• lodash
• jquery
• d3

Default: {}

Example usage:

externals: {
  'mycdnlibrary': 'myCdnLibrary'
}

An external is a module that webpack will exclude from its bundles, but know how to load using require() syntax. Whenever we load code from a CDN, we should treat it like an external. Read more on the webpack docs.

loaders

Add loaders for other types of files here. They will be added to the standard loaders that every app has:

• js - babel loader
• css - style loader, with postcss
• png/jpeg/gif - file loader
• html - raw loader
• woff/ttf/eot/svg - file loader

Default: []

Example:

loaders: [
  // Adds support for loading JSON files.
  {
    test: /\.json$/,
    loader: 'json'
  }
]

To use the JSON loader example, make sure to npm install --save json-loader.

To learn more about loaders, see the webpack docs.