OpenFL project.xml loader for Webpack
npm install openfl-loaderA custom loader to build OpenFL (and Feathers UI) projects with Webpack.
Create a new directory for your project.
Create the necessary files for an OpenFL project, including _project.xml_ inside the project's root directory and your _.hx_ source files. 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:
``sh`
npm init -y
Then, run the following command to install the required dependencies:
`sh`
npm install --save-dev webpack-cli webpack-dev-server openfl-loader
Open the _package.json_ file, and modify the scripts section:
`json`
"scripts": {
"start": "webpack serve --mode=development",
"build": "webpack --mode=production"
}
Create a _webpack.config.js_ file in the root of your project:
`js`
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_:
`html`
And you need to change the lime.embed() call to pass the same app file name used in _project.xml_.
`js`
/*
the first argument passed to lime.embed() is the
*/
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.
`sh`
npm start
To build a production JavaScript bundle, run the following command:
`sh``
npm run build