Plugin skeleton with webpack

Are there any examples of an Aurelia plugin project with the dev-app configured to use webpack instead of Aurelia’s bundler?

There doesn’t seem to be an option to configure the dev-app to use webpack from the CLI. Are there any plans to add the option to au new --plugin?

1 Like

The cli-bundler can share existing tasks with plugin project, while webpack requires more investment (it’s possible though). This is documented in offical plugin guide. https://aurelia.io/docs/plugins/write-new-plugin#structure-of-plugin

1 Like

Thank you for your help! I didn’t quite understand what you mean by “the cli-bundler can share existing tasks with plugin project”, but I did setup an example webpack plugin project skeleton here: https://github.com/pwoosam/aurelia-plugin-webpack-skeleton

I don’t think it’s working quite right yet though. The dev-app works and loads the plugin properly, but I had to change PLATFORM.moduleName('./elements/hello-world') to PLATFORM.moduleName('elements/hello-world') in src/index.ts. Something feels off about not being able to use a relative path.

Also this skeleton project does not bundle the plugin into commonjs or native-module distributables, but I plan on using webpack exclusively, so referencing and building from the /src directory seems to be fine.

I’m wondering if there is something not quite right in my configuration that prevents me from being able to use relative paths in the plugin’s src.

1 Like

cli-bundler uses gulp tasks which can be adjusted easily to run plugin and write out plugin dist files. For webpack you can try resolve doc for some module resolution https://webpack.js.org/configuration/resolve/, I don’t know enough of it, nor interested :slight_smile:

1 Like

I believe webpack is resolving the modules, but aurelia-loader-webpack is having a hard time finding the module by it’s reference PLATFORM.moduleName('./elements/hello-world').

Webpack is indeed bundling hello-world.ts as I can find it in the app chunk when running webpack --analyze

It is just aurelia-loader-webpack having a hard time finding the module by its module id

1 Like

Hmm, we may need to get @jods4 to chime in here. He probably answered this somewhere

I use lerna in a few projects to do what you are trying to do, an example available here: https://github.com/jbockle/au-jsonschema-form

2 Likes

@bigopon Thank you so much. You’ve actually solved the module dependency issue in the other thread I started: Possible to change a plugin's source and watch changes in the consuming application

I just had to remove srcDir from modules in the webpack.config.js and I can now use relative moduleNames: PLATFORM.moduleName('./elements/hello-world')

This is so awesome. Our plugins can have dev-apps bundled with webpack and our SPAs can now reference our local plugin repos and get live updates when our plugins’ src changes!

@jbockle Thank you for introducing lerna. I don’t think we want a monorepo right now, but we’ll keep it in mind for the future. Also that plugin you have looks very useful! Our company is trying to accomplish the same thing, generating forms from jsonschema. Definitely going to have to look your plugin!

1 Like

Thanks! Its not quite ready to use yet, still unreleased/under active development.

2 Likes

Love the idea to create a plugin out of this. We’re extensively using schema forms in the app I’m developing since it makes use of the Monaco Editor, which in turn can display additional intellisense for custom file types based on a present json-schema, plus the same schema is then used to generate a UI editor for e.g a settings file. I’ve left you an issue in your repo with a few ideas we’ve already built, which might be a good fit for the plugin. Looking forward to seeing how this evolves.

1 Like