Simplest possible working sample for dojo project packaged with webpack

Building large dojo/dijit projects with dojo build is not the prettiest of experiences. And the resulting builds tend to be fairly slow. Additionaly I haven't managed to get sourcemaps to work so I set out to find a more modern way to achieve a similar effect to dojo layers.

webpack seems to be one of the possible alternatives (and browserify might be another) dojo-webpack-loader implements a loader to bundle dojo/dijit projects with webpack

Prerequisites

• nodejs (and npm) installed
• some nodejs http server module to test result (like http-server)

Steps

npm install
bower install
webpack --progress --colors  --optimize-minify
http-server ./

Then open http://localhost:8080/button.html in your browser. Open your developer tools and check whether you can see the source of e.g. dojo/dijit/form/Button.js (to be found in the resource named 1.1.bundle.js)

The dojo code that is loaded in the button.html file is the (web-)packed version. The code is obviously trivial (and taken straight from the dojo reference page sample ).

The webpack.config.js file has been modified from the samples found here in that it adds another loader config:

alias: { "dojo/domReady": 'raw-loader' }

which solved a problem when using dojo/domReady! in your dojo files - a dreaded error like

ERROR in ./src/button.js
Module not found: Error: Cannot resolve module 'dojo/domReady' in /Users/joerg/dev/dojo-dijit-webpack-sample/src
 @ ./src/button.js 1:0-11:2