Dev: Webpack workflow

Webpack

With webpack branch things get (hopefully) simplified quite a lot.

Webpack is integrated to maven build, so mvn install will run webpack compilation and karma unit tests.

Compilation

For development mode, it is possible to use webpack --watch command, but you need to run it in windup-web/ui/src/main/webapp directory. It will stay running and it will recompile source codes and place them into /target/windup-web directory. With exploded deployment explained in this tutorial https://github.com/windup/windup-web/wiki/Dev:-Setting-up-Windup-web changes will be immediately visible in the application.

Testing

For unit testing, use karma start. Some IDEs also provide very nice integration - for example IntelliJ Idea has karma plugin and with that it is easy to run tests - right click on karma.conf.js file and click Run. It is possible to toggle auto-test option, which will run unit test on each file change (after save).

Debugging in Google Chrome

In Google Chrome debugging has changed little bit - now there is one app.js file which contains all compiled *.ts files. For debugging original .ts files, it is easiest to use ctrl-p key shortcut to find .ts file by name.

There are also other options:

1. Finding corresponding section of code in app.js and after placing breakpoint, it will show the original .ts file.
2. Finding the file in webpack:// . src directory tree.

+ webpack://
|    +--- .
|    |    + src

3. Finding the file using ctrl-shift-f (ctrl-p seems to be better).