报错说 filename 不能写成 [name].[chunkhash:8].js ，改成[hash]就可以了

最新推荐文章于 2025-06-10 14:18:20 发布

原创最新推荐文章于 2025-06-10 14:18:20 发布 · 1.4w 阅读

0 ·

CC 4.0 BY-SA版权

webpack4.x 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在开发环境中使用chunkhash与热更新（Hot Module Replacement）的冲突问题，提出了解决方案，即在开发环境下避免使用chunkhash，并确保webpack.HotModuleReplacementPlugin()不被激活，以实现更稳定高效的开发体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                    chunkhash只能用在生产环境不能用在开发环境
去掉热更新，不要让webpack.HotModuleReplacementPlugin()在plugins里运行, 热更新与js的chunkhash有冲突

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IT码农-爱吃辣条

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

本本本添哥

01-10

2365

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

初识 Webpack (七) 其他配置(制定css、js添加域名，解析html中的image，跨域、devtool定位css和js异常位置、clean插件、图标等)

Sicily_winner的博客

01-27

1310

目录 ◆打包图片处理 3个文件基础直接跳转至此操作： 3个文件操作结束 ◆ 打包css和image分别指定文件夹（） ◆ 访问图片时加上域名 ◆ 代理服务器 ◆ webpack其他属性（跨域） ◆ devtool配置（定位异常）文章前言内容 ✔生产环境 js定位异常位置 ✔ 生产环境 css 定位异常位置 ◆ clean-webpack-plugin（...

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

error in js/[name].[contenthash:8].jsCannot use [chunkhash] or [contenthash] for chunk in ‘js/[n

weixin_38331749的博客

04-04

471

将production改成development。

Vue CLI 构建的项目，执行 npm run dev 启动开发服务时报错： in [name].[chunkhash].js 、Cannot use [chunkhash] or [content

最新发布

SSophia的博客

06-10

因为本地服务启动的是 webpack-dev-server ,一般都是内置了 HotModuleReplacementPlugin 热更新，而这个热更新恰恰与配置的 chunkhash 或 contenthash 有冲突。根据 process.env.NODE_ENV 环境变量来选择是否使用 chunkhash 或 contenthash。修改 webpack 配置，这里以Vue的 vue.config.js 为例。

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

spicyboiledfish的博客

08-13

9944

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

webpack4 output配置 filename chunkhash报错

weixin_30487701的博客

10-23

413

这里的hash由chunkhash改成hash，原因是使用HotModuleReplacementPlugin之后不能使用chunkhash和contenthash。看到有些地方说把“hot:true”去掉就行了，但是我自己实际测试不行，只是去掉hot还是会报错；所以我索性给改成hash了，反正是本机调试，影响不大。我的做法是区分环境,不同环境输出不同的配置.这样本地测试就不会报错了. ...

Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案

weixin_34268169的博客

06-28

457

文件的hash指纹通常作为前端静态资源实现增量更新的方案之一，Webpack是目前最流行的开源编译工具之一，其强大的功能也带来很多坑（当然，大部分麻烦其实都可以在官方文档中找到答案）。比如，在Webpack编译输出文件的配置过程中，如果需要为文件加入hash指纹，Webpack提供了两个配置项可供使用：hash和chunkhash。那么两者有何区别呢？其各自典型的应用场景又是什么？本文结合笔者工...

webpack源码解析三

vv_bug

07-09

2658

前言前面写了一篇文章webpack源码解析一梳理了一遍webpack的编译过程，今天我们结合demo来过一遍webpack的所有配置项。开始为了更好的了解每一个选项的用法我们首先clone一份webpack的源码（demo用的是5.0.0-beta.7版本）： git clone https://github.com/webpack/webpack.git 源码clone完毕后在当前页面执行setup操作并且安装webpack-cli： yarn setup && yarn add

webpack学习笔记实例

mus-z的博客

07-31

1179

webpack-尚硅谷 https://www.bilibili.com/video/BV1e7411j7T5?p=39 可以去gitee看一下我里面有资料和demo 文章目录webpack-尚硅谷概述五个核心概念看演示~如何打包样式：如何打包html：打包图片：打包其他资源：热加载devServer开发环境搭建生产环境的痛点cssjshtml生产环境配置webpack优化配置开发环境性能优化：优化打包构建速度-HRM优化代码**调试**-source-map生产环境性能优化优化打包构建速度-oneOf优化

Webpak4.0+vue从零构建基础配置，环境区分，插件配置

Mini_小仙女的博客

11-27

868

基本目录为什么要用webpack?为什么要用webpack?如何配置和使用webpack？基础配置环境区分插件如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入为...

webpack基本用法

qq_30418537的博客

03-28

412

webpack5 中文官网 "webpack": "^5.28.0", "webpack-cli": "^4.5.0" webpack 其实就是一个打包构建工具,静态模块打包器确定一个入口文件将引入的模块 chunk 进行编译生成 bundle 俗称打包废话不多讲了，开始吧 webpack 五个核心概念 entry 指定入口文件 output 输出文件,位置，文件名 loader 翻译官处理非 js 文件，webpack 自身只能打包 js 或 json 如：

webpack4基础知识点（一）

在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。

08-27

361

1.安装好node,新建一个目录，进入该目录然后执行 2.局部安装webpack，webpack-cli 3.npm script 运行webpack 4.webpack核心概念--entry

js获取页面完整域名结合webpack的应用

qlin_11的博客

02-05

308

js获取页面完整域名 window.location.protocol+"//"+window.location.host webpack的配置： output: { // filename:'[name].[chunkhash:8].js', filename: "bundle.js", chunkFilename: "[name].js", // publicPath在使用server不同时需要进行配置，针对server的ip和端口。 // DI中使用host

vue项目版本更新后文件存在缓存问题解决方案(vue-cli2.0/vue-cli3.0)

xiasohuai的博客

06-18

6067

vue-cli2.0 1.配置webpack.prod.conf.js 配置output加t=[chunkhash:8]相当于加时间戳，用于清缓存 output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js?t=[chunkhash:8]'), chunkFilename: utils.assetsPath('js/[id].[chunkhas..

13. 重学webpack——一文彻底了解hash、chunkhash和contenthash的区别

2024路在何方

07-30

3765

不要再傻傻分不清 hash、 chunkhash 和 contenthash 啦

开心学前端 : )

06-19

1838

hash、contenthash 和 chunkhash 是通过散列函数处理之后，生成的一串字符，可用于区分文件。webpack.config.js 文件中，output 中定义输出 js 文件命名，plugins 中定义的抽取 css 文件命名在中使用发送请求，中引入资源编译后，虽然我们自己定义的 css 文件名为，但是由于它被引入了，所以打包出来的文件名变成了。每一次编译后，生成的文件名都一样，这样会存在一个问题，通过 webpack 编译生成的静态文件会被我们放置到服务器中，当编译后的

webpack 日常使用问题总结

心动的博客

05-11

267

本地运行报错 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.

webpack面试题（2024 最新版）

qq_16546829的博客

03-13

7305

发现源码发生变化时，自动重新构建出新的输出文件。

Webpack5 处理 js 资源

weixin_52053631的博客

03-12

216

Webpack5 处理 js 资源

css :{ extract:{ filename: `static/css/[name]-[hash].css`, chunkFilename: `static/css/[name]-[chunkhash:8].css` }, },

03-27

看起来像是Webpack的配置，因为用了filename和chunkFilename，还有hash和chunkhash这些占位符。用户给出的配置是： extract:{ filename: `static/css/[name]-[hash].css`, chunkFilename: `static/css/[name]-...