问题描述:
如果不用 hash文件名,而是固定文件名,可能导致前段缓存这个 js文件,导致需要经常清理缓存。通过动态的hash文件名可以解决这个问题。打包后webpack会自动注入带hash的文件地址到 index.ejs文件中。
1、在 .webpackrc 文件中添加
{
"hash": true, // 文件名使用hash的方式进行打包
"html": {
"template": "./public/index.ejs"
},
}
2、删除 public 下的 index.html 文件,新增 index.ejs 文件
文件内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dva Demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
3、遇到的问题
问题1
启动可能报错,这是因为.webpackrc 文件配置还是有点问题,具体没有找原因,加上一部分配置就可以了,如下
{
"hash": true, // 文件名使用hash的方式进行打包
"html": {
"template": "./public/index.ejs"
},
"extraBabelPlugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}]
]
}
问题2
需要安装 babel-plugin-import ,这个组件是按需加载组件。