added project files

app/readme.md

@@ -0,0 +1,131 @@
+# Modular Haxe JS with Webpack
+
+This project demonstrates the creation of a Haxe-JavaScript modular project leveraging Webpack
+for bundling (code and assets) and lazy loading.
+
+It's really easy and absolutely transparent in the code!
+
+**Note: this is a "vanilla DOM" example - no 3rd party library involved!**
+
+
+## How it works
+
+### Leveraging Webpack features
+
+You will need to get familiar with how Webpack works - thankfully the documentation
+is excellent nowadays: [https://webpack.js.org/](https://webpack.js.org/)
+
+A project aims at creating a Webpack loader for Haxe:
+[https://github.com/jasononeil/webpack-haxe-loader](https://github.com/jasononeil/webpack-haxe-loader)
+
+Every asset dependency should be explictely required, so Webpack knows what to include
+in the output folder. With the right configuration, small assets can even be inlined in
+the bundle to reduce the number of requests.
+
+```haxe
+Webpack.require('./index.css');
+
+var img = new Image();
+img.src = Webpack.require('./logo.png');
+```
+
+Even the HTML page is generated by a plugin, so everything has to go through Webpack.
+
+### Haxe JS code splitting
+
+Haxe JS isn't normally capable of code splitting, but the core functionality was
+developped within the (Webpack-free) Haxe Modular project:
+[https://github.com/elsassph/haxe-modular](https://github.com/elsassph/haxe-modular)
+
+The Haxe Webpack loader will leverage the code splitting feature when you request
+modules asynchronously:
+
+```haxe
+import com.Foo;
+...
+// Extract Foo (and dependencies) into a separate bundle
+Webpack.load(Foo).then(function(_) {
+	// Foo is now loaded
+	var foo = new Foo();
+});
+```
+
+### Webpack config
+
+Webpack's "magic" is configured in the `webpack.config.js`. It is a very powerful and
+flexible system which is documented here: [https://webpack.js.org/](https://webpack.js.org/)
+
+The basics is that the `haxe-loader` allow to "require" an
+[HXML file](https://haxe.org/manual/compiler-usage-hxml.html),
+which in turn will provide the (splitted) JS output to Webpack.
+
+This feature is added as a "rule" in the config:
+```
+{
+	test: /\.hxml$/,
+	loader: 'haxe-loader',
+	options: {
+		extra: `-D some_extra=arguments`,
+		debug: debugMode
+	}
+},
+```
+
+HXMLs can be require directly from JS code, or as an entry point, which allows to
+make a pure Haxe Webpack project:
+```
+entry: {
+	app: './build.hxml'
+},
+```
+
+## Development
+
+### Tools
+
+Using [yarn](https://yarnpkg.com) for node modules is recommended:
+
+	npm install yarn -g
+
+Using [hmm](https://github.com/andywhite37/hmm) for haxelibs is recommended:
+
+	haxelib --global install hmm
+	haxelib --global run hmm setup
+
+### Installation
+
+Install npm and haxe dependencies:
+
+	yarn install
+	hmm install
+
+### Running
+
+Then start Webpack webserver, open `http://localhost:9000`, and enjoy live reload:
+
+	yarn start
+
+### Hot Module Replacement
+
+Hot-Module Replacement is the technique allowing, while your browser is showing your 
+live application, to hot-reload CSS and the Haxe modules!
+
+React views in asynchronous modules will automatically refresh themselves if you edit
+and save: Webpack will recompile the project, reload the module, and re-render the 
+views without losing state. un and try editing `Foo.hx`!
+
+For that you only need to:
+- add `-D react_hot` in your `hxml`,
+- call `ReactHMR.autoRefresh` after the main render (see `App.hx`),
+- run in live debug mode (`yarn start`).
+
+### Releasing
+
+To build the project statically, run:
+
+	yarn build
+
+For a production release:
+
+	export NODE_ENV=production
+	yarn build -p