OpenFL Loader for Webpack

A custom loader to build OpenFL (and Feathers UI) projects with Webpack.

Usage

Create a new directory for your project.

Create the necessary files for an OpenFL project, including project.xml and .hx source files inside the project's root directory. Then, follow the remaining steps to setup Webpack and openfl-loader.

In a terminal, run the following command in the root of your project to create a package.json file:

npm init -y

Then, run the following command to install the required dependencies:

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

Open the package.json file, and modify the scripts section:

"scripts": {
  "start": "webpack serve --mode=development",
  "build": "webpack --mode=production"
}

Create a webpack.config.js file in the root of your project:

module.exports = {
  entry: "./project.xml",
  output: {
    // change xyz to an appropriate name for your project
    filename: "xyz.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\/project\.xml$/,
        use: [
          {
            loader: "openfl-loader",
          },
        ],
      },
    ],
  },
};

Create a public/index.html file. Look inside samples/basic sample for an example that's easy to copy with minor modifications.

In particular, you need to change the basic.bundle.js path to the same output file name used in webpack.config.js:

<!--
  This bundle file name is defined in webpack.config.js
-->
<script src="./basic.bundle.js"></script>

And you need to change the lime.embed() call to pass the same app file name used in project.xml.

/*
  the first argument passed to lime.embed() is the
  <app file="******"/> value from project.xml
*/
lime.embed("WebpackBasicSample", "openfl-content", 0, 0, {
  parameters: {},
});

To start a local development server, run the following command. Then, open http://localhost:8080/ in a web browser.

npm start

To build a production JavaScript bundle, run the following command:

npm run build