How to import the module using Webpack?

How do I import the module for use with a webpack dev server? Where do I put the magick.wasm and magick.js files? I’m using preact and start the dev server with preact watch. Can I edit webpack.config.js to include the files somehow?

edit: I’ve tried using copy-webpack-plugin, which seems to work if I build the project, but in the development server I get errors:

Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://localhost:8080/') with script ('https://localhost:8080/sw-debug.js'): An unknown error occurred when fetching the script.

DOMException: Failed to construct 'Worker': Script at 'webpack-internal:///../node_modules/wasm-imagemagick/dist/src/magick.js' cannot be accessed from origin 'https://localhost:8080'.

Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at 'webpack-internal:///../node_modules/wasm-imagemagick/dist/src/magick.js' cannot be accessed from origin 'https://localhost:8080'.

[fz6m]

I tried to modify the bundled output .js file, use a hack way of loading the Web worker in webpack.

image-magick

Unfortunately it takes a little longer to load the .js file (5 MB) for the first time in the page 😣

hope this helps

[orteth01]

i have gotten this to work by including this script directly in my html

<script type="module">
  import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js';
  window.magick = Magick;
</script>

as you can see, it imports the lib from a remote source and then puts it on the window object. I still include the wasm files in the public directory. I still include the node module in my dependencies so that I can grab the typescript types and use them to extend window.

it’s not ideal, but i also was not successful in any of my attempts to just use the npm module.

hope this helps!