给打包生成的文件添加hash后缀

1,975 阅读1分钟

因为更新项目到线上后可能存在缓存的问题,用户访问的还是更新前的代码,所以需要给打包生成的文件添加 hash 后缀来避免缓存的问题。

1.webpack

output: {
    path: __dirname + '/build',
    filename: 'bundle-[hash].js'
}

2.umi

在 config.js 中设置

export default defineConfig({
    // 添加 hash 后缀
    hash: true,
    // 拆分打包生成的文件,否则只生成一个 umi.js
    dynamicImport: {
        loading: '@/components/loading',
    },
})

或者在根目录添加一个 .umirc.js 文件

export default {
    hash: true,
    dynamicImport: {
        loading: '@/components/loading',
    },
}

3.react-app-rewired

默认就有 hash 后缀
react-app-rewired 可以在不 eject 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置