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:
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.