Open paztis opened 3 years ago
Do not ignore section how we can reproduce it, i.e. core and configuration, otherwise we can't help
In dev mode, in case of code change, only the top level window might listne the events / try to refresh the page or the main window need a way to advert the subframes to avoid listening
Expected, why do you avoid changes here?
You want me to produce a full application to explain you the problem ?
Expected, why do you avoid changes here?
In case of liveReload (page reload), the subframe is destroyed during the top window unload Then a new subframe is created. Devtools encounter problems because it starts to decode sourcemap then destroy and load a new frame
I search a way to inform the subframes not to listen to socket events or at least to not refresh code. But if I disable hot or liveReload, I do it also for top level window.
There's no way to provide different configs for each page produced by the same webpack build
You want me to produce a full application to explain you the problem ?
Minimum or configuration
original comment updated with webpack config and index files
You need to use injectHot
as function and return false for index-frame1
and index-frame2
With injectHot and injectClient I only have the compile config as argument.
How do I do a distinction between chunk entry of root index and chuck entries of frame index ? More it seems only called one time, not on each entry chunk
any other idea @alexander-akait ?
We need improve injectClient
and injectHot
and pass entry to callback
Great that was my idea.
Feel free to send a PR
I've take a look at it I correctly see how to do it for webpack 4 (in lib/utils/devServerPlugin.js) in prependEntry, as I control all the chunks
const prependEntry = (originalEntry, additionalEntries) => {
if (typeof originalEntry === 'function') {
return () =>
Promise.resolve(originalEntry()).then((entry) =>
prependEntry(entry, additionalEntries)
);
}
if (typeof originalEntry === 'object' && !Array.isArray(originalEntry)) {
/** @type {Object<string,string>} */
const clone = {};
Object.keys(originalEntry).forEach((key) => {
// entry[key] should be a string here
const entryDescription = originalEntry[key];
// ===========> job to do to decide to inject or not, depending of 'key' chunk
clone[key] = prependEntry(entryDescription, additionalEntries);
});
return clone;
}
// in this case, entry is a string or an array.
// make sure that we do not add duplicates.
/** @type {Entry} */
const entriesClone = additionalEntries.slice(0);
[].concat(originalEntry).forEach((newEntry) => {
if (!entriesClone.includes(newEntry)) {
entriesClone.push(newEntry);
}
});
return entriesClone;
};
But in webpack 5 mode, I don't see how to do it
compiler.hooks.make.tapPromise('DevServerPlugin', (compilation) =>
Promise.all(
additionalEntries.map(
(entry) =>
new Promise((resolve, reject) => {
compilation.addEntry(
compiler.context,
EntryPlugin.createDependency(entry, {}),
{}, // global entry
(err) => {
if (err) return reject(err);
resolve();
}
);
})
)
)
);
Any idea of it ?
We should improve our check, yes, it is not implemented
until this is developed, is there's any way to do it through custom plugin I can wrote or something else ? I'm using webpac-dev-server@3.11.2 and webpack@4.
I know how to do it inside your code for webpack 4, but useless to create a PR that didn't cover the webpack 5 case, or it is ?
I don't think it is possible to solve on plugin level without extra hacks
Will you accept PR for version 3.11, or you stop enhancement on it an onli work on v4 ?
If this does not require global changes, we can accept it, but you need send two PRs for v3 and v4
what it will require I think is a modification / enhancement of the injectClient init param signature, or another init param. Is it considered as global ?
I think yes, for me it is not global changes
PR created in v3: #2995 Tell me if it is ok before I start master report
Here is the PR for master: #2998
I will look at this in this week
Have you found time to look at it ?
On the next week I am working on dev server, so I will look at near future
any news for the review ?
Still on my roadmap (near future)
any updated ? I open it 2 years ago now
@paztis Yeah, sorry for that, let's do rebase of you PR, I want to do a new release soon, so let's incude this in a new release
Anyway why don't use Function
?
Code
src/index.js
src/index-frame1.js
src/index-frame2.js
Expected Behavior
I've an application that contains 2 sub iframes Webpack generates 3 html files for the application In dev mode, in case of code change, only the top level window might listne the events / try to refresh the page or the main window need a way to advert the subframes to avoid listening
Actual Behavior
in dev mode, all the frames + root window are listening the hot reload changes. In case of code change, the frames + root window tries to reload the page in same time Chrome devTools frequently crashes because of to many logs (3x the progress logs) + interrupted sourcemaps decoding
For Bugs; How can we reproduce the behavior?
create an app with an iframe, both pointing to html pages managed by webpack
For Features; What is the motivation and/or use-case for the feature?