webpack 之缓存处理

2024-08-25 11:42:18

针对这里的所提到的观点，如果webpack每次都生成相同名字的bundle.js，会导致问题。这里使用webpack的文件hash功能来解决，简简单单地为输出文件添加一个“[hash]”即可。

// 配置文件

module.exports = {

    entry:  [__dirname + "/main.js"],

    output: {

        path: __dirname + "/dist",

        filename: "bundle-[hash].js",

    },

}

//main.js

require('./index');

//index.js

alert(123);

运行生成文件如下：

如果把index.js中的 alert(123) ；改为 alert(1233)，因为内容已经发生变化，就会生成不同的文件，同时上次旧的文件也会依然存在：

现在又出现一个问题，文件名字都不同了，我开发的时候到底该怎么引入呢？答案是使用 HtmlWebpackPlugin 插件。

还有一个问题，如果多次修改，多次打包，旧的文件每次残留，会越来越多。如果想把没用的删除掉，可以使用 CleanWebpackPlugin 插件

最新文章

热门文章