Webpack generate different chunks with the same contenthashDifference between == and === in JavaScriptWhat's the difference between using “let” and “var”?Generate random string/characters in JavaScriptGenerating random whole numbers in JavaScript in a specific range?What is the difference between call and apply?Generate random number between two numbers in JavaScriptDifferences between lodash and underscoreWhat is the difference between Bower and npm?NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. WebpackHow to handle deploys with Webpack code splitting?
Review your own paper in Mathematics
Taxes on Dividends in a Roth IRA
Why does this expression simplify as such?
What to do when eye contact makes your coworker uncomfortable?
Can a stoichiometric mixture of oxygen and methane exist as a liquid at standard pressure and some (low) temperature?
Change the color of a single dot in `ddot` symbol
Stack Interview Code methods made from class Node and Smart Pointers
What are some good ways to treat frozen vegetables such that they behave like fresh vegetables when stir frying them?
What is the highest possible scrabble score for placing a single tile
How do I fix the group tension caused by my character stealing and possibly killing without provocation?
Were Persian-Median kings illiterate?
awk assign to multiple variables at once
Why should universal income be universal?
When were female captains banned from Starfleet?
How much theory knowledge is actually used while playing?
Why do Radio Buttons not fill the entire outer circle?
What is Cash Advance APR?
Is there a way to have vectors outlined in a Vector Plot?
Non-trope happy ending?
Delete multiple columns using awk or sed
Will number of steps recorded on FitBit/any fitness tracker add up distance in PokemonGo?
Pre-mixing cryogenic fuels and using only one fuel tank
Shouldn’t conservatives embrace universal basic income?
A Trivial Diagnosis
Webpack generate different chunks with the same contenthash
Difference between == and === in JavaScriptWhat's the difference between using “let” and “var”?Generate random string/characters in JavaScriptGenerating random whole numbers in JavaScript in a specific range?What is the difference between call and apply?Generate random number between two numbers in JavaScriptDifferences between lodash and underscoreWhat is the difference between Bower and npm?NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. WebpackHow to handle deploys with Webpack code splitting?
I've a Webpack 4.1 configuration that use code splitting and output chunks names using a pattern like myproj-[name]-[contenthash].chunk.js
.
I'm copying all of the production bundle files, for every version, in the same directory on the server, being sure (until now) that chunks are unique and I have no clashing.
Today I found an issue releasing a new version of the application: I've a file named myproj-modulex-0bb2f31cc0ca424a07d8.chunk.js
that was also generated with the old version (that's the scope of contenthash, isn't it?). I'm expecting that the content of the file is identical but it isn't.
There's only one character changed (the array index). The chunk start with...
(window.webpackJsonp_XXXX=window.webpackJsonp_XXXX||[]).push([[7],{"2d0274e27fde9220edd9"...
...while the old version was using ...push([[6],...
.
One of the difference of the new version from the old ones is that I added new code splitting points.
So: it seems that new split points changed chunks order, but webpack still use the same generated filename (probably because contenthash
is referred to the realm module content?).
The issue is critical: when the new file is copied on the server it overwrite the old file and so client using old version are not working anymore because chunk is loaded in a wrong position on the push array (I guess).
Error is:
"Error: Loading chunk 6 failed.
(missing: https://.../myproj-xxx-0bb2f31cc0ca424a07d8.chunk.js)"
There's a way to fix this issue, maybe naming pushed chunks, or specifying the order, or generated different hashes? chunkhash
?
javascript webpack code-splitting
add a comment |
I've a Webpack 4.1 configuration that use code splitting and output chunks names using a pattern like myproj-[name]-[contenthash].chunk.js
.
I'm copying all of the production bundle files, for every version, in the same directory on the server, being sure (until now) that chunks are unique and I have no clashing.
Today I found an issue releasing a new version of the application: I've a file named myproj-modulex-0bb2f31cc0ca424a07d8.chunk.js
that was also generated with the old version (that's the scope of contenthash, isn't it?). I'm expecting that the content of the file is identical but it isn't.
There's only one character changed (the array index). The chunk start with...
(window.webpackJsonp_XXXX=window.webpackJsonp_XXXX||[]).push([[7],{"2d0274e27fde9220edd9"...
...while the old version was using ...push([[6],...
.
One of the difference of the new version from the old ones is that I added new code splitting points.
So: it seems that new split points changed chunks order, but webpack still use the same generated filename (probably because contenthash
is referred to the realm module content?).
The issue is critical: when the new file is copied on the server it overwrite the old file and so client using old version are not working anymore because chunk is loaded in a wrong position on the push array (I guess).
Error is:
"Error: Loading chunk 6 failed.
(missing: https://.../myproj-xxx-0bb2f31cc0ca424a07d8.chunk.js)"
There's a way to fix this issue, maybe naming pushed chunks, or specifying the order, or generated different hashes? chunkhash
?
javascript webpack code-splitting
add a comment |
I've a Webpack 4.1 configuration that use code splitting and output chunks names using a pattern like myproj-[name]-[contenthash].chunk.js
.
I'm copying all of the production bundle files, for every version, in the same directory on the server, being sure (until now) that chunks are unique and I have no clashing.
Today I found an issue releasing a new version of the application: I've a file named myproj-modulex-0bb2f31cc0ca424a07d8.chunk.js
that was also generated with the old version (that's the scope of contenthash, isn't it?). I'm expecting that the content of the file is identical but it isn't.
There's only one character changed (the array index). The chunk start with...
(window.webpackJsonp_XXXX=window.webpackJsonp_XXXX||[]).push([[7],{"2d0274e27fde9220edd9"...
...while the old version was using ...push([[6],...
.
One of the difference of the new version from the old ones is that I added new code splitting points.
So: it seems that new split points changed chunks order, but webpack still use the same generated filename (probably because contenthash
is referred to the realm module content?).
The issue is critical: when the new file is copied on the server it overwrite the old file and so client using old version are not working anymore because chunk is loaded in a wrong position on the push array (I guess).
Error is:
"Error: Loading chunk 6 failed.
(missing: https://.../myproj-xxx-0bb2f31cc0ca424a07d8.chunk.js)"
There's a way to fix this issue, maybe naming pushed chunks, or specifying the order, or generated different hashes? chunkhash
?
javascript webpack code-splitting
I've a Webpack 4.1 configuration that use code splitting and output chunks names using a pattern like myproj-[name]-[contenthash].chunk.js
.
I'm copying all of the production bundle files, for every version, in the same directory on the server, being sure (until now) that chunks are unique and I have no clashing.
Today I found an issue releasing a new version of the application: I've a file named myproj-modulex-0bb2f31cc0ca424a07d8.chunk.js
that was also generated with the old version (that's the scope of contenthash, isn't it?). I'm expecting that the content of the file is identical but it isn't.
There's only one character changed (the array index). The chunk start with...
(window.webpackJsonp_XXXX=window.webpackJsonp_XXXX||[]).push([[7],{"2d0274e27fde9220edd9"...
...while the old version was using ...push([[6],...
.
One of the difference of the new version from the old ones is that I added new code splitting points.
So: it seems that new split points changed chunks order, but webpack still use the same generated filename (probably because contenthash
is referred to the realm module content?).
The issue is critical: when the new file is copied on the server it overwrite the old file and so client using old version are not working anymore because chunk is loaded in a wrong position on the push array (I guess).
Error is:
"Error: Loading chunk 6 failed.
(missing: https://.../myproj-xxx-0bb2f31cc0ca424a07d8.chunk.js)"
There's a way to fix this issue, maybe naming pushed chunks, or specifying the order, or generated different hashes? chunkhash
?
javascript webpack code-splitting
javascript webpack code-splitting
asked 17 hours ago
keulkeul
5,7011030
5,7011030
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Webpack uses ids as a chunk references and those ids are not guaranteed to remain the same for the same chunks among different builds. contenthash
is used for files extracted by ExtractTextWebpackPlugin
. The same source content will get the same contenthash
but the generated file may differ due to id
changes.
Try using myproj-[name]-[chunkhash].chunk.js
instead.
Also take a look at optimization.moduleIds and optimization.chunkIds
settings.
Thanks, those information point me to the right solution. Seems thatchunkIds
(notmoduleIds
) was the answer. One time again: I'm stuck by the edge cases on webpack... Web is full of tutorial just saying "just use contenthash" while the solution is not that easy.
– keul
16 hours ago
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55279950%2fwebpack-generate-different-chunks-with-the-same-contenthash%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Webpack uses ids as a chunk references and those ids are not guaranteed to remain the same for the same chunks among different builds. contenthash
is used for files extracted by ExtractTextWebpackPlugin
. The same source content will get the same contenthash
but the generated file may differ due to id
changes.
Try using myproj-[name]-[chunkhash].chunk.js
instead.
Also take a look at optimization.moduleIds and optimization.chunkIds
settings.
Thanks, those information point me to the right solution. Seems thatchunkIds
(notmoduleIds
) was the answer. One time again: I'm stuck by the edge cases on webpack... Web is full of tutorial just saying "just use contenthash" while the solution is not that easy.
– keul
16 hours ago
add a comment |
Webpack uses ids as a chunk references and those ids are not guaranteed to remain the same for the same chunks among different builds. contenthash
is used for files extracted by ExtractTextWebpackPlugin
. The same source content will get the same contenthash
but the generated file may differ due to id
changes.
Try using myproj-[name]-[chunkhash].chunk.js
instead.
Also take a look at optimization.moduleIds and optimization.chunkIds
settings.
Thanks, those information point me to the right solution. Seems thatchunkIds
(notmoduleIds
) was the answer. One time again: I'm stuck by the edge cases on webpack... Web is full of tutorial just saying "just use contenthash" while the solution is not that easy.
– keul
16 hours ago
add a comment |
Webpack uses ids as a chunk references and those ids are not guaranteed to remain the same for the same chunks among different builds. contenthash
is used for files extracted by ExtractTextWebpackPlugin
. The same source content will get the same contenthash
but the generated file may differ due to id
changes.
Try using myproj-[name]-[chunkhash].chunk.js
instead.
Also take a look at optimization.moduleIds and optimization.chunkIds
settings.
Webpack uses ids as a chunk references and those ids are not guaranteed to remain the same for the same chunks among different builds. contenthash
is used for files extracted by ExtractTextWebpackPlugin
. The same source content will get the same contenthash
but the generated file may differ due to id
changes.
Try using myproj-[name]-[chunkhash].chunk.js
instead.
Also take a look at optimization.moduleIds and optimization.chunkIds
settings.
edited 16 hours ago
answered 16 hours ago
UjinT34UjinT34
1,226112
1,226112
Thanks, those information point me to the right solution. Seems thatchunkIds
(notmoduleIds
) was the answer. One time again: I'm stuck by the edge cases on webpack... Web is full of tutorial just saying "just use contenthash" while the solution is not that easy.
– keul
16 hours ago
add a comment |
Thanks, those information point me to the right solution. Seems thatchunkIds
(notmoduleIds
) was the answer. One time again: I'm stuck by the edge cases on webpack... Web is full of tutorial just saying "just use contenthash" while the solution is not that easy.
– keul
16 hours ago
Thanks, those information point me to the right solution. Seems that
chunkIds
(not moduleIds
) was the answer. One time again: I'm stuck by the edge cases on webpack... Web is full of tutorial just saying "just use contenthash" while the solution is not that easy.– keul
16 hours ago
Thanks, those information point me to the right solution. Seems that
chunkIds
(not moduleIds
) was the answer. One time again: I'm stuck by the edge cases on webpack... Web is full of tutorial just saying "just use contenthash" while the solution is not that easy.– keul
16 hours ago
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55279950%2fwebpack-generate-different-chunks-with-the-same-contenthash%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown