# Webpack worker-loader in Plugin verwenden

**URL:** <https://forum.shopware.com/t/webpack-worker-loader-in-plugin-verwenden/98079>\
**Category:** Programmierung\
**Tags:** programming\
**Created:** [19. Januar 2023 um 07:19 UTC](https://forum.shopware.com/t/webpack-worker-loader-in-plugin-verwenden/98079 "2023-01-19T07:19:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![goldbachmedien](https://avatars.discourse-cdn.com/v4/letter/g/ba9def/32.png) [@goldbachmedien](https://forum.shopware.com/u/goldbachmedien)\
**Post date:** [19. Januar 2023 um 07:19 UTC](https://forum.shopware.com/t/webpack-worker-loader-in-plugin-verwenden/98079/1 "2023-01-19T07:19:05Z")

</div>

Hallo zusammen!

## tl;dr;

Ich versuche den webpack worker-loader im JavaScript meines Shopware-Plugins einzusetzen und komme hier leider auf keinen grünen Zweig. Hat jemand Erfahrung damit?

## Ausführlicher:

Ich versuche in meinem Plugin JavaScript Web Worker ([Web Workers API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)) einzusetzen. Da Storefront auf webpack in der Version 4 setzt und ich gerne mit Hot Module Reload (HMR) entwickle, habe ich in meiner eigenen webpack.config.js den worker-loader ([worker-loader | webpack](https://v4.webpack.js.org/loaders/worker-loader/)) eingebaut.

Meine webpack.config.js sieht wie folgt aus:

```auto
const { join, resolve } = require('path');
const webpack = require('webpack');
const path = require("path");

module.exports = () => {
    return {
        module: {
            rules: [
                {
                    test: /\.worker\.js$/,
                    use: {
                        loader: "worker-loader"
                    },
                },
            ],
        },
        resolveLoader: {
            alias: {
                "worker-loader": resolve(
                    join(__dirname, '..', 'node_modules', 'worker-loader'),
                ),
            },
        }
    }
}

```

In meiner packackge.json im Plugin trage ich webpack, webpack-cli und den worker-loader wie folgt ein:

```auto
"devDependencies": {
    "webpack": "^4.0.0",
    "webpack-cli": "^4.0.0",
    "worker-loader": "^3.0.0"
  }

```

Das _.bin/build-storefront_ läuft so problemlos durch. Allerdings kann der Browser die Worker-Datei (xyz.worker.js) nicht finden. Im HMR-Mode (ich nutze das über Dockware `make watch-storefront`) versucht er **textmesh.worker.worker.js** über **[http://localhost:9998/js/textmesh.worker.worker.js](http://localhost:9998/js/textmesh.worker.worker.js)** zu finden und schlägt dabei fehl. Ich vermute, dass im Hot-Mode eher **[http://localhost:9998/\_webpack\_hot\_proxy\_/js/textmesh.worker.worker.js](http://localhost:9998/_webpack_hot_proxy_/js/textmesh.worker.worker.js)** angefragt werden sollte, kann das sein?

Ich freue mich über jede Info/Erfahrung/Anregung zu dem Thema!

Liebe Grüße

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [19. Januar 2023 um 07:55 UTC](https://forum.shopware.com/t/webpack-worker-loader-in-plugin-verwenden/98079/2 "2023-01-19T07:55:53Z")

</div>

Habe mich mit dem HMR-Mode noch nie wirklich explizit auseinandergesetzt, ist das aber nicht schon in watch-storefont.sh implementiert? Einzige Bedingung ist, dass das env=dev ist, wenn ich mich recht erinnere.

---

<div class="post-metadata">

**Author:** ![goldbachmedien](https://avatars.discourse-cdn.com/v4/letter/g/ba9def/32.png) [@goldbachmedien](https://forum.shopware.com/u/goldbachmedien)\
**Post date:** [19. Januar 2023 um 11:10 UTC](https://forum.shopware.com/t/webpack-worker-loader-in-plugin-verwenden/98079/3 "2023-01-19T11:10:31Z")

</div>

Das HMR tut auch was es soll - allerdings meine ich, dass es den publicPath anpasst, mit dem die Assets dann erreichbar sind. Deswegen sieht man im base.html.twig von der Storefront auch diesen Teil hier:

```auto
{# @deprecated tag:v6.5.0 - Will be moved to `layout/meta.html.twig` - Use block `layout_head_javascript_hmr_mode` instead #}
            {% block base_script_hmr_mode %}
                {% if isHMRMode %}
                    <script type="text/javascript" src="/_webpack_hot_proxy_/js/vendor-node.js"></script>
                    <script type="text/javascript" src="/_webpack_hot_proxy_/js/vendor-shared.js"></script>
                    <script type="text/javascript" src="/_webpack_hot_proxy_/js/runtime.js"></script>
                    <script type="text/javascript" src="/_webpack_hot_proxy_/js/app.js"></script>
                    {# The storefront entry is a combined entry point which contains all plugins & themes #}
                    <script type="text/javascript" src="/_webpack_hot_proxy_/js/storefront.js"></script>
                {% else %}
                    {% for file in theme_config('assets.js') %}
                        <script type="text/javascript" src="{{ asset(file, 'theme') }}"></script>
                    {% endfor %}
                {% endif %}
            {% endblock %}

```

Da ist ja dann immer dieser \_webpack\_hot\_proxy Präfix bei vor den Assets.

Hat hier jemand schon einmal einen Web Worker in einem Shopware Plugin erfolgreich eingebaut?

---

<div class="post-metadata">

**Author:** ![goldbachmedien](https://avatars.discourse-cdn.com/v4/letter/g/ba9def/32.png) [@goldbachmedien](https://forum.shopware.com/u/goldbachmedien)\
**Post date:** [19. Januar 2023 um 11:56 UTC](https://forum.shopware.com/t/webpack-worker-loader-in-plugin-verwenden/98079/4 "2023-01-19T11:56:50Z")

</div>

#Teil-Lösung

Für den HMR-Teil konnte ich es mit der **inline** -option vom worker-loader lösen:

```auto
rules: [
    {
        test: /\.worker\.js$/,
        use: {
            loader: "worker-loader",
            options: {
                inline: isHotMode ? "fallback" : "no-fallback",
            },
        },
    },
],

```

Wenn ich „ganz normal“ über `yarn build`, also `webpack --config ./build/webpack.config.prod.js` bauen möchte, behauptet er, mein JS-File, das den Worker importen möchte sei Fehlerhaft:

```auto
ERROR in ./src/my-plugin/Aufrufendes.js 10:21
Module parse failed: Unexpected token (10:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

```

---

<div class="post-metadata">

**Author:** ![goldbachmedien](https://avatars.discourse-cdn.com/v4/letter/g/ba9def/32.png) [@goldbachmedien](https://forum.shopware.com/u/goldbachmedien)\
**Post date:** [20. Januar 2023 um 11:22 UTC](https://forum.shopware.com/t/webpack-worker-loader-in-plugin-verwenden/98079/5 "2023-01-20T11:22:55Z")

</div>

Falls noch jemand darüber stolpert: die Option `inline` im webpack-dev falle auf **fallback** zu setzen und sonst auf **no-fallback** hat bei mir zum gewünschten Ergebnis geführt!