132 lines
3.6 KiB
Markdown
132 lines
3.6 KiB
Markdown
# 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
|