由webpack创建的包在编译成功后不会在浏览器上反映更改

webpack是一个现代的静态模块打包工具，它可以将多个前端资源（如JavaScript、CSS、图片等）进行打包，最终生成一个或多个最优化的包。在使用webpack时，开发人员经常会遇到一个问题：当修改源代码后，webpack重新编译并生成新的包，但这些更改不会自动地在浏览器上反映出来。

这个问题是因为浏览器缓存机制导致的。一旦浏览器已经缓存了webpack生成的包，它就不会再向服务器请求新的包文件。因此，尽管webpack生成了新的包，浏览器仍然加载并使用缓存的旧包。

为了解决这个问题，可以通过以下几种方法：

1. 强制刷新：按下Ctrl + F5（Windows/Linux）或Cmd + Shift + R（Mac）组合键来强制刷新浏览器页面。这将绕过浏览器缓存，加载最新的包文件。但这种方法并不方便，特别是当网站已经发布到生产环境时。
2. 添加哈希值或版本号：在webpack的输出文件名中添加哈希值或版本号可以保证每次修改源代码后，生成的包文件名都是不同的。例如，可以使用webpack的output.filename配置项来指定包文件名为[name].[hash].js，其中[hash]将会被替换为每次编译的唯一哈希值。这样，每次生成的包文件都有不同的文件名，浏览器会认为它是一个新的文件，从而请求并加载最新的包。
3. 使用webpack-dev-server的热模块替换（Hot Module Replacement，HMR）功能：webpack-dev-server是webpack提供的一个开发服务器，它支持热模块替换功能。开启HMR后，webpack会监测源代码的修改，并通过WebSocket将更改的模块代码发送到浏览器端，然后在浏览器端进行局部更新，而不需要完全刷新页面。这样可以加快开发速度，并且不会影响浏览器中的其他状态。要启用HMR功能，可以在webpack配置文件中添加devServer.hot: true配置项。
4. 使用webpack-dev-middleware和webpack-hot-middleware：这两个中间件可以在Node.js服务器中实现类似webpack-dev-server的热模块替换功能。使用这两个中间件可以自定义开发服务器，并在其中集成HMR功能。

总结起来，要解决webpack生成的包在浏览器上不会反映更改的问题，可以通过强制刷新、添加哈希值或版本号、使用webpack-dev-server的HMR功能或使用webpack-dev-middleware和webpack-hot-middleware来实现。以上方法都可以保证在修改源代码后，浏览器能够加载最新的包文件并反映出更改。

腾讯云相关产品和产品介绍链接地址：

• webpack可以搭配使用的腾讯云产品有对象存储（COS）和CDN加速，具体可以参考腾讯云COS和CDN的文档：腾讯云COS、腾讯云CDN

请注意，本回答未提及其他云计算品牌商，根据要求进行回答。