# Webpack ES Modules Demo

This demo shows how to integrate the yFiles library in a webpack project.

Two fundamental concepts for webpack projects are demonstrated:

- Code Splitting
- Separate webpack configurations for development and production.

## Running the demo

First, install the required npm modules in the demo directory:

`> npm install`

### Development

For development, the webpack dev server offers convenient live reloading support to minimize turnaround times.

The dev server will serve the webpack bundles from memory (no bundles will be created on disc), update the app bundle and refresh the page when changes are made to the source files.

To run the dev server:

`> npm start`

This will create the bundles in memory and launch the generated index file in a browser.

When the server runs, try making changes to `src/webpack-demo.js` and see how the app will be updated in the browser immediately.

Debugging of application files in the browser's developer tools should work fine, as source maps are generated by webpack. See webpack's Devtool option for more fine grained configurations.

### Production

The following build steps are specific to the production configuration:

- Append a content-based hash to the bundle filename to enable long-term caching.
- Minify the bundles using webpack's minification plugin.

To run the production build:

`> npm run production`

Note that the final minification step of the production build may take some time.