Comments (12)
+1
from worker-loader.
Could you try to give an example for that please?
from worker-loader.
Absolutely!
Imagine that you are using lodash, bluebird etc. from a common file (common.js) and you need the libs in common.js in both "normal code" and "worker code". Before using webpack I could add common.js to my index.html file and import it in my worker with self.importScripts('common.js'); (https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts)
Since common.js would be cached by the browser it would only be loaded once. With webpack I see that my worker has all the libs included in worker.js but it could have included my common.js that is a common chunk used by all my apps.
from worker-loader.
I have a similar question. I use lodash
in both main chunk and web worker chunk. Right now it's bundled with both chunks. I assume that I need somehow to create a common chunk. How to configure this properly?
from worker-loader.
I created an example of this problem at this repo.
While importScripts
can be used to include webpack bootstrap functions / commons chunks, you don't have enough info to actually require the modules you need. This should be done in either worker-loader or in another plugin and not manually... though I don't know enough about plugin / loader development to provide a solution
from worker-loader.
// TODO remove and tand make this functionality a loader option instead,
// since this doesn't work with webpack > v2.0.0 anymore
if (this.options && this.options.worker && this.options.worker.plugins) {
this.options.worker.plugins.forEach(plugin => worker.compiler.apply(plugin));
}
webpack.config.js
{
test: /\.worker\.js$/,
use: {
loader: 'worker-loader',
options: {
plugins: [ new CommonChunksPlugin() ]
}
}
}
from worker-loader.
@michael-ciniawsky , @d3viant0ne -
I have a similar ask for my application. My web worker has to currently wrap rxjs, lodash etc for it's operations while I already have a vendor utility JS spit out by webpack.
Looking for some help/suggestions.
webpack: v3.8.1
worker-loader: v0.8.1
Thanks,
Suds
from worker-loader.
Fwiw the plugin works fine for me when using a shim like this:
const window = self;
importScripts("vendor.bundle.js");
importScripts("worker.bundle.js");
A shim is necessary because the worker needs the bootstrapping code to be loaded first. In the main app this is done by simply importing via the webpage, but here the worker must import it (and hence the "worker", or in this case the shim, must already be loaded)
The way I use the shim here is in a plain js file that is not processed through webpack (and hence does not need the bootstrapping code)
The bootstrapping code tries to use window instead of self, so assigning window
to self
fixes that ;)
from worker-loader.
@dakom thanks for the response!
Would it be possible for you to copy/highlight the plain js code you mentioned?
from worker-loader.
hi @roysudi - believe it or not, that snippet above is the entire plain js code :)
from worker-loader.
This issue is also being discussed at: webpack/webpack#6472
from worker-loader.
I wondering if it is possible to factorize duplicate code using DllPlugin ?
from worker-loader.
Related Issues (20)
- worker-loader does not work with "worker_threads" HOT 3
- Inline workers does not work in Edge Legacy anymore HOT 54
- worker-loader picks up webpack5 from parent folder, not webpack4 from peer HOT 12
- docs don't explain how to register ServiceWorker HOT 1
- Does this loader supports Node.js Worker threads? HOT 22
- "chunkFilename.replace is not a function" on webpack 5 HOT 5
- Inline workers not working _in_ a worker HOT 16
- Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor HOT 5
- Worker-loader with inline option produce cjs/loader error on build
- Cannot find module 'webpack/lib/SingleEntryPlugin' HOT 3
- Allow per-instance or per-worker-code options (such as name or constructor type) without explicit webpack rules
- build error: chunkFilename.replace is not a function at getDefaultChunkFilename HOT 5
- Document usage with Typescript / Webpack config style HOT 5
- does worker-loader work with webpack 5? HOT 4
- [feat] support load plain worker module in another worker HOT 5
- loader.option.publicPath do not work ? HOT 7
- use sharedWorker inline has the same filename HOT 2
- why 'ctx.terminate' is not wokring
- How can I import a library in worker?
- TypeError: The 'compilation' argument must be an instance of Compilation HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from worker-loader.