# Plugin skeleton with webpack

**URL:** <https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167>\
**Category:** Framework Knowledge\
**Created:** [January 18, 2020, 12:46am UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167 "2020-01-18T00:46:44Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![pwoosam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/pwoosam/32/1692_2.png) [@pwoosam](https://discourse.aurelia.io/u/pwoosam)\
**Post date:** [January 18, 2020, 12:46am UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/1 "2020-01-18T00:46:44Z")

</div>

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`?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [January 18, 2020, 3:35am UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/2 "2020-01-18T03:35:25Z")

</div>

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](https://aurelia.io/docs/plugins/write-new-plugin#structure-of-plugin)

---

<div class="post-metadata">

**Author:** ![pwoosam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/pwoosam/32/1692_2.png) [@pwoosam](https://discourse.aurelia.io/u/pwoosam)\
**Post date:** [January 20, 2020, 9:40pm UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/3 "2020-01-20T21:40:54Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [January 20, 2020, 9:56pm UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/4 "2020-01-20T21:56:25Z")

</div>

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/](https://webpack.js.org/configuration/resolve/), I don’t know enough of it, nor interested 🙂

---

<div class="post-metadata">

**Author:** ![pwoosam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/pwoosam/32/1692_2.png) [@pwoosam](https://discourse.aurelia.io/u/pwoosam)\
**Post date:** [January 20, 2020, 10:35pm UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/5 "2020-01-20T22:35:27Z")

</div>

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`

 ![Screen Shot 2020-01-20 at 2.32.06 PM](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/2/2d71e03982feb1c69a709aa191e54bfe18fc796c.jpeg)

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

 ![Screen Shot 2020-01-20 at 2.34.14 PM](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/4/4b2808be760a47cc0fe0946556a8e7ac49176262.png)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 21, 2020, 11:45am UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/6 "2020-01-21T11:45:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [January 21, 2020, 12:37pm UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/7 "2020-01-21T12:37:04Z")

</div>

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](https://github.com/jbockle/au-jsonschema-form)

---

<div class="post-metadata">

**Author:** ![pwoosam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/pwoosam/32/1692_2.png) [@pwoosam](https://discourse.aurelia.io/u/pwoosam)\
**Post date:** [January 21, 2020, 4:59pm UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/8 "2020-01-21T16:59:24Z")

</div>

@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](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166)

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!

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [January 22, 2020, 1:59am UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/9 "2020-01-22T01:59:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 22, 2020, 7:09am UTC](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/10 "2020-01-22T07:09:35Z")

</div>

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.