Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/feathersui/webpack-openfl-loader
A Webpack loader for OpenFL and Feathers UI projects targeting html5
https://github.com/feathersui/webpack-openfl-loader
feathers-ui haxe openfl openfl-target-html5 webpack webpack-loader
Last synced: 2 months ago
JSON representation
A Webpack loader for OpenFL and Feathers UI projects targeting html5
- Host: GitHub
- URL: https://github.com/feathersui/webpack-openfl-loader
- Owner: feathersui
- License: other
- Created: 2022-06-28T17:54:36.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T00:29:01.000Z (about 2 years ago)
- Last Synced: 2024-11-18T02:43:05.859Z (3 months ago)
- Topics: feathers-ui, haxe, openfl, openfl-target-html5, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# OpenFL Loader for Webpack
A custom loader to build [OpenFL](https://openfl.org) (and [Feathers UI](https://feathersui.com/)) projects with [Webpack](https://webpack.js.org).
## Usage
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
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.
```sh
npm start
```
To build a production JavaScript bundle, run the following command:
```sh
npm run build
```