【webpack】踩坑：output-filename-[chunkhash] 使用问题

最新推荐文章于 2022-07-22 15:46:13 发布

GStarP

最新推荐文章于 2022-07-22 15:46:13 发布

阅读量1.7k

点赞数 1

分类专栏： webpack 文章标签： webpack 踩坑 [chunkhash] 模块热替换

本文链接：https://blog.csdn.net/hxw3274743/article/details/99065946

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Webpack 官方指南踩坑：[chunkhash] 使用后报错

官方指南（版本：v4.39.1）

错误信息

Cannot use [chunkhash] or [contenthash] for chunk in '[name].[chunkhash].bundle.js' (use [hash] instead)

问题所在

由于本人 迭代式 地按照官方指南进行学习，所以在学习到这一章节时，代码中保留了此前 模块热替换 的内容。

而问题就在于此：模块热替换和 [chunkhash] 是冲突的！！！

解决方案

将 [chunkhash] 替换为 [hash]
停止 webpack.HotModuleReplacementPlugin(）插件的使用

优惠劵

GStarP

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【webpack】踩坑：output-filename-[chunkhash] 使用问题

webpack 学习踩坑：模块热替换与 [chunkhash]，有你没我，有我没你！
复制链接

扫一扫

专栏目录

【异常】前端提示Cannot use [chunkhash] or [contenthash] for chunk in ‘[name].[chunkhash].js‘

本本本添哥

01-10

1119

基于ElementUI构建的前端项目，在执行 npm run dev 启动开发服务时报错： in [name].[chunkhash].js 、Cannot use [chunkhash] or [contenthash] for chunk in ‘[name].[chunkhash].js’ (use [hash] instead)，查询文档后，发现是webpack配置的问题。

【异常】记一次前端因资源无法加载导致白屏异常问题

本本本添哥

01-10

1766

（1）对npm的构建不熟悉，导致了scripts脚本都会写错。（2）对webpack不熟悉，不懂构建webpack是如何控制构建结果的。

参与评论您还未登录，请先登录后发表或查看评论

webpack-plugin-hash-output：用于使用最终文件内容的md5哈希替换webpack chunkhash的插件

02-06

webpack插件哈希输出插件以最终文件内容的md5哈希替换webpack chunkhash。安装与npm npm install webpack-plugin-hash-output --save-dev 带纱 yarn add webpack-plugin-hash-output --dev 为什么？还有其他的webpack插件可以在那里散列。但是，当它们运行时，它们不会“看到”代码的最终形式，因为它们在诸如webpack.optimize.UglifyJsPlugin插件之前运行。换句话说，如果您更改webpack.optimize.UglifyJsPlugin配置，

webpack4 Cannot use [chunkhash] or [contenthash] for chunk in '[name].[chunkhash].js' (use [hash] in...

weixin_30500663的博客

09-12

3405

热替换影响了chunkhash的使用，你要确保hotModuleReplacementPlugin(）函数没在生产环境下执行，转载于:https://www.cnblogs.com/mengdiezhuangzhou/p/9636209.html

报错Cannot use [chunkhash] or [contenthash] for chunk in '[name][chunkhash:8].js' (use [hash] instead)

spicyboiledfish的博客

08-13

9102

先贴出报错：这里我使用了css的contenthash, 以及js的chunkhash, 这个跟hotModuleReplacementPlugin有冲突导致的。mode已经改成了development仍然报错。解决方案：将new webpack.HotModuleReplacementPlugin()这一段注释掉，就ok了。 plugins: [ new M...

webpack 日常使用问题总结

心动的博客

05-11

213

本地运行报错 ERROR Failed to compile with 1 errors 2:34:34 PM error in css/app.fc6d2467.css Cannot use [chunkhash] or [contenthash] for chunk in 'js/[name].[contenthash.

vue报错Cannot use [chunkhash] or [contenthash] for chunk in ‘js/[name].[chunkhash:8].js‘ (use [hash] i

qq_45094682的博客

07-22

1982

Webpack（十八）：Cannot use [chunkhash] or [contenthash] for chunk in ‘js/[name].[contenthash:10].js‘ (us

You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉

09-23

3554

运行dev报错npx webpack-dev-server 解决方法 module.exports = { output: { filename: this.mode === 'production' ? 'js/[name].[contenthash:10].js' : 'js/[name].[hash:10].js', }, }

Cannot use [chunkhash] or [contenthash] for chunk

胡聊前端的博客

01-19

1428

filenameHashing在devServer中开启导致的问题可以做如下判断： const isProd = process.env === 'production'; module.exports = { ... // 仅在打部署包的时候开启 filenameHashing: isProd, ... }

详解webpack中的hash、chunkhash、contenthash区别

11-27

hash、chunkhash、contenthash hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存。但是在实际使用的时候，这几种hash计算还是有一定区别。我们先建一个测试案例来模拟下：项目结构我们的项目结构很简单，入口文件index.js，引用了index.css。然后新建了jquery.js和test.js作为公共库。 //index.js require('./inde

webpack-使用webpack-dev-server.rar

04-12

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。这里用一个最简单的例子，让大家迅速的了解原理，避免被其他的附加技术干扰。

web-webpack-plugin：替代html-webpack-plugin

02-03

web-webpack-plugin 想全面学习Webpack？试试它：不错替代品，可以使webpack将HTML用作条目并处理多页。安装 npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-...

webpack-test:webpack-test

07-14

#Webpack 测试网络包测试

webpack-upload-plugin:Webpack插件

05-13

webpack-upload-plugin介绍这是的插件。主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。... 对于webpack @ 2，请使用webpack-upl

webpack 文档（指南） - 缓存（hash、chunkhash和contenthash）

qq_36605165的博客

05-23

615

浏览器在多次访问静态资源文件的时候，如果该文件已经在本地缓存，并且它的名称没有改变，那么浏览器会认为它没有被更新，便不会去请求服务器，而是使用该静态资源的缓存版本。如果某个文件被更改，我们希望浏览器应该重新请求它，而不是使用缓存版本，所以文件被修改后，它的名称也应该被改变。在 webpack 中，最后生成的 chunk 文件都是由一个个的 module 编译后组合而成的，浏览器请求的 JS 文件实际上就是一个个的 chunk 。当我们修改某个 module 后，其所属 chunk 打包后的 JS 文件名称

webpack中hash、chunkhash和contenthash三者的区别

老夫风清扬的博客

03-12

1093

在webpack中有三种的方式生成哈希值，分别为hash、chunkhash和contenthash。这三种方式有着不同的用处，或者说在webpack的不同环境中，会使用不同的方式生成哈希值。那为什么要这样的一个区分呢？我们一起探讨下： hash 主要用于webpack的开发环境，在项目构建编译中根据文件是否更改，生成一个统一的hash值。就是说只要构建编译过程中只要一个文件修改了，则整个项目的h...

vue 强制清理浏览器缓存

weixin_42066070的博客

06-30

1604

上代码不bb在vue.config.js

sh1:webpack-dev-server: Permission denied

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交