webpack 之 缓存处理

针对 这里 的所提到的观点,如果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 插件

原文地址:https://www.cnblogs.com/hellohello/p/7803912.html