Howler.js: How to import Howler core in Webpack4/npm/Babel without plugins and other extras?

[Friksel]

Before using Webpack, in the past I just used the minified Howler core-file to exclude unused extras in the build to keep build as small as possible. But how can we do this with imports in Webpack? I only see people using { Howl } from 'Howler', or 'Howler from 'Howler'. I would expect something like { HowlerCore } from 'Howler', or { HowlerCore, HowlerPlugins } from 'Howler', but can't find anything on that.
I tried some things myself, but so far without luck. It looks like stuff like the spatialplugin still gets included in the outputbundle.

How to only include Howler core by using es6 imports?

Thanks

[Friksel]

@goldfire Thanks for adding the 2.1.0 milestone on june, but we're at 2.1.1 now and the spatial/effects extras are still imported and appear in the webpack build.
I couldn't find nothing about this in the changes list. Did I overlook something or am I missing something?

[Friksel]

Hi @goldfire, it's been over a year since this request. Unfortunately the Spatial Plugin is still included when importing the howler module using Webpack. I believe little users use the spatial plugin and want it in the output. So I am surprised it's still not possible to leave it out using imports, like it was possible when using the single files before.

Any progress/news on this? Thanks!

[Friksel]

Hi @goldfire, it's years since this request. You added the 2.1.0 milestone, but we're at 2.1.3 now and it's still not done.

On my request for an update last year you didn't even respond, which would have taken you only one minute. I think is pretty bad you just ignore your users for so long and it comes across as arrogant to me.

I am going to look for alternatives now or build one myself.

[0xdevalias]

The main in package.json is set to dist/howler.js, which appears to contain both the core+plugin as you have noted.

But looking at the files in the package, we have other options:

If we wanted to use the presumably unminified/raw src code directly:

import { Howl, Howler } from 'howler/src/howler.core'
// import 'howler/src/plugins/howler.spatial'

If we want to use the not minified dist version that is already joined into a single file (which is also the default export I believe):

import { Howl, Howler } from 'howler'
// import { Howl, Howler } from 'howler/dist/howler'

If we want to use the minified dist version that is already joined into a single file:

import { Howl, Howler } from 'howler/dist/howler.min'

If we wanted to use the minified dist versions separately (eg. to not include the spatial plugin):

import { Howl, Howler } from 'howler/dist/howler.core.min'
// import 'howler/dist/howler.spatial.min'

@goldfire It could be nice to update the readme with some of these examples to make it a little more obvious to newcomers?

---

@Friksel Just stumbled upon this issue, haven't tested the output, but would something like this solve your need? (note: i'm using a webpack/babel setup)