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


字数:206 阅读时长:1分钟 阅读:85

Vue CLI 构建的项目,执行 npm run dev 启动开发服务时报错: in [name].[chunkhash].jsCannot use [chunkhash] or [contenthash] for chunk in '[name].[chunkhash].js' (use [hash] instead),查询文档后,发现是webpack配置的问题。

Webpack

报错原因

因为本地服务启动的是 webpack-dev-server ,一般都是内置了 HotModuleReplacementPlugin 热更新,而这个热更新恰恰与配置的 chunkhashcontenthash 有冲突。所以只能在生产环境(production)下使用 chunkhashcontenthash

解决

根据 process.env.NODE_ENV 环境变量来选择是否使用 chunkhashcontenthash

修改 webpack 配置,这里以Vue的 vue.config.js 为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vue.config.js

const mode = process.env.NODE_ENV
const isDev = mode === 'development'
module.exports = {
// ... 其他配置

// 关键配置
configureWebpack: {
output: {
filename: isDev ? `[name].js` : `[name].[contenthash:5].js`,
chunkFilename: isDev ? `[name].js` : `[name].[contenthash:5].js`,
},
},
}

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-01-16
最后更新: 2022-04-14
本文标题: Cannot use [chunkhash] or [contenthash] for chunk in '[name].[chunkhash].js'
本文链接: https://www.tiven.cn/p/4352e508/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^