javascript - Webpack 生成具有相同 contenthash 的不同 block

标签 javascript webpack code-splitting

我有一个 Webpack 4.1 配置,它使用代码分割并使用 myproj-[name]-[contenthash].chunk.js 等模式输出 block 名称。

我正在将每个版本的所有生产捆绑文件复制到服务器上的同一目录中,并确保(到目前为止) block 是唯一的并且没有冲突。

今天,我在发布应用程序的新版本时发现了一个问题:我有一个名为 myproj-modulex-0bb2f31cc0ca424a07d8.chunk.js 的文件,该文件也是使用旧版本生成的(这就是范围) contenthash 的,不是吗?)。我期望文件的内容相同,但事实并非如此

仅更改了一个字符(数组索引)。 block 开始于...

(window.webpackJsonp_XXXX=window.webpackJsonp_XXXX||[]).push([[7],{"2d0274e27fde9220edd9"...

...而旧版本使用 ...push([[6],....

新版本与旧版本的区别之一是我添加了新的代码分割点。

所以:似乎新的分割点改变了 block 的顺序,但 webpack 仍然使用相同的生成文件名(可能是因为 contenthash 引用了真实的模块内容?)。

问题很关键:当新文件复制到服务器上时,它会覆盖旧文件,因此使用旧版本的客户端不再工作,因为 block 加载到推送数组上的错误位置(我猜)。

错误是:

"Error: Loading chunk 6 failed.
(missing: https://.../myproj-xxx-0bb2f31cc0ca424a07d8.chunk.js)"

有办法解决这个问题,也许命名推送的 block ,或者指定顺序,或者生成不同的哈希值? chunkhash

最佳答案

Webpack 使用 ids 作为 block 引用,并且不保证不同构建中相同 block 的这些 id 保持相同。 contenthash 用于通过 ExtractTextWebpackPlugin 提取的文件。相同的源内容将获得相同的 contenthash,但生成的文件可能会因 id 更改而有所不同。

尝试改用myproj-[name]-[chunkhash].chunk.js

另请查看optimization.moduleIds和 optimization.chunkIds 设置。

关于javascript - Webpack 生成具有相同 contenthash 的不同 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55279950/

相关文章:

javascript - 在 Moment.js 中获取日期、小时和分钟

javascript - Vis.js 网络 : how to add a node on click inside the canvas?

springboot + webpack 开发服务器,重建后不会更改 localhost 捆绑文件

ionic-framework - ionic : livereload not working after including custom webpack. config.js

javascript - 使用 webpack 和 angular2 动态加载模块

javascript - 使用 Webpack 动态导入命名导出

javascript - 如何将 Javascript var 传递到 href 标签中?

javascript - 使方法 "click"跨浏览器的插件

reactjs - 在 React 中动态导入 svg

vue.js - VueJS如何实现渐进式渲染?