Skip to content

Instantly share code, notes, and snippets.

@dmnsgn

dmnsgn/foo.js

Created November 24, 2021 15:28
Show Gist options
  • Save dmnsgn/1b6b464a6c6aa2ed4d4c1d2a18042e02 to your computer and use it in GitHub Desktop.
Save dmnsgn/1b6b464a6c6aa2ed4d4c1d2a18042e02 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
foo.js
console.log("foo");
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="dist/bundle.js" type="module"></script>
</body>
</html>
Raw
index.js
const myWorker = new Worker(new URL("worker.js", import.meta.url), {
type: "classic",
});
myWorker.onmessage = function (e) {
console.log("Message received from worker", e.data);
};
myWorker.postMessage([42]);
Raw
package.json
{
"name": "webpack-worker-type-classic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "npx webpack",
"serve": "npx browser-sync"
},
"keywords": [],
"author": "Damien Seguin (https://github.com/dmnsgn)",
"license": "MIT",
"devDependencies": {
"webpack": "^5.64.3",
"webpack-cli": "^4.9.1"
}
}
Raw
webpack.config.js
const path = require("path");
module.exports = {
entry: "./index.js",
mode: "production",
optimization: {
minimize: false,
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
clean: true,
libraryTarget: "module",
},
experiments: { outputModule: true },
};
Raw
worker.js
self.importScripts(new URL("./foo.js", import.meta.url));
onmessage = function (e) {
console.log("Worker: Message received from main script");
const workerResult = "Result: " + e.data[0];
console.log("Worker: Posting message back to main script");
postMessage(workerResult);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment