Replies: 2 comments 20 replies
-
|
To set up Webpack for both Web and Webworker, you need two different configurations because each configuration type must have its own For example, we have a html page and a Worker used on the page: const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
const webConfig = {
target: 'web', // can be omitted, because default target is `web`
plugins: [
new HtmlBundlerPlugin({
entry: {
index: 'src/index.html', // => dist/index.html
},
js: {
inline: true,
},
css: {
inline: true,
},
}),
],
}
const webWorkerConfig = {
target: 'webworker', // <= very important set the target for workers
entry: {
// define workers here
'workers/sw': './src/sw.js', // => dist/workers/sw.js
}
}
module.exports = [webConfig, webWorkerConfig];The Web Workers will be compiled and saved to the
<html>
<head>
<meta charset="utf-8">
<link href="./style.css" rel="stylesheet">
<script src="./index.ts" defer="defer"></script>
</head>
<body>
...
<script type="module">
// the worker's path is a path relative by `dist/`
navigator.serviceWorker.register('/workers/sw.js', {
scope: './workers/', // <= set to the directory where the service worker script is located, relative by `dist/`
type: 'module'
});
</script>
</body>
</html>Now you can use in your |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure where I place the files in the directory and what I write in the HTML to reference a file as |
Beta Was this translation helpful? Give feedback.
-
|
I spent the past day testing connecting an arbitrary Web page to the |
Beta Was this translation helpful? Give feedback.
-
|
you cannot load a Worker script directly into Firstly you should create a normal JS file (e.g. 'app.js') and load this file in html app.js const workerUrl = '/workers/myWorker.js'; // <= this is the output filename relative to the `dist/`
const worker = new Worker(workerUrl);
// ..The |
Beta Was this translation helpful? Give feedback.
-
|
I'm not talking about a |
Beta Was this translation helpful? Give feedback.
-
|
I think what was throwing were query string parameters passed as Isolated Web App URL to |
Beta Was this translation helpful? Give feedback.
-
|
FWIW This is a summary of what I wound up doing for this particular version of controlling an IWA from an arbitrary Web page using the the Webpack/Node.js/et al. code from https://github.com/guest271314/telnet-client/tree/guest271314-patch-1:
|
Beta Was this translation helpful? Give feedback.
-
Let's say I want to load a ServiceWorker. How would the webpack.common.js look and where would I save sw.js?
I've been getting an error trying to do this different ways, here saving sw.js in src where index.html is stored.
Beta Was this translation helpful? Give feedback.
All reactions