Webpack OpenFL Loader 1.0

Webpack is a very popular build tool in the JavaScript and web ecosystem, and organizations that use Webpack may want to integrate an OpenFL or Feathers UI frontend into their existing build process. With that in mind, today, I'm releasing a new Webpack OpenFL Loader.

This is just one of many projects that I'm releasing as part of the Feathers UI v1.0 release week celebration.

Haxe and OpenFL already bundle all of the generated JavaScript into a single minified file already, so why would you want to use Webpack? (or Vite?)

  • In an organization already making heavy use of Webpack, it is helpful if there's a way to integrate OpenFL into common workflows.
  • The Webpack ecosystem offers a ton of plugins and loaders to process and enhance JavaScript, HTML, and CSS files. These tools make it possible to go beyond the default capabilities of the Haxe compiler when targeting the web.
  • Many modern teams have switched to JS modules, which are enhanced by some of Webpack's more advanced capabilities, like code splitting and tree shaking. With Haxe, you can use a library like Genes to modify the output of the compiler to generate JS modules instead of a classic script — allowing you to take advantage of everything that Webpack has to offer.

Using webpack-openfl-loader v1.0.0

See the project README.md for complete details, but basically, you need to install a few npm dependencies and then configure the loader in your webpack.config.js file. Then, build normally with Webpack.

First, install dependencies from npm:

npm install --save-dev webpack-cli webpack-dev-server openfl-loader

Then, configure your a webpack.config.js file to indicate that your OpenFL project.xml is the entry point and should be handled by openfl-loader:

module.exports = {
  entry: "./project.xml",
  output: {
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\/project\.xml$/,
        use: [
          {
            loader: "openfl-loader",
          },
        ],
      },
    ],
  },
};

Again, check the README.md for more details. Additionally, there are a couple of sample projects on Github to help you get started. The basic project uses the default output from the Haxe compiler, and the genes project uses Genes to generate JS modules and load a code-split module at runtime.

Questions or comments?

If you need some help, or want to give feedback, feel free to create a thread in either the Feathers UI Community forum or the OpenFL Community forum.