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

webpack 之 缓存处理的更多相关文章

  1. webpack构建缓存机制-hash介绍

    前言 浏览器为了优化体验,会有缓存机制.如果浏览器判断当前资源没有更新,就不会去服务端下载,而是直接使用本地资源.在webpack的构建中,我们通常使用给文件添加后缀值来改名以及提取公共代码到不会改变 ...

  2. webpack 配置缓存

    1.输出文件的文件名 加hash 2.提取引导模板 3.模块标识符 https://webpack.docschina.org/guides/caching/#src/components/Sideb ...

  3. webpack code splitting

    一.代码分割优化 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin' ...

  4. webpack入门文档教程

    .octicon{margin-right:2px}a.tabnav-extra:hover{color:#4078c0;text-decoration:none}.tabnav-btn{margin ...

  5. Webpack 4 SplitChunksPlugin配置方案(转)

    通常情况下我们的 WebApp 是有我们的自身代码和第三方库组成的,我们自身的代码是会常常变动的,而第三方库除非有较大的版本升级,不然是不会变的,所以第三方库和我们的代码需要分开打包,我们可以给第三方 ...

  6. 09 webpack的介绍

    webpack干嘛的?:  模块打包机,分析目录结构,找到js模块(包括浏览器不能直接识别的代码 typscript sass...),打包成合适的格式供浏览器访问 webpack是一款模块加载器兼打 ...

  7. webpack进阶(三)

    1)CommonsChunkPlugin已经从webpack4移除,所以在用webpack进行公共模块的拆分时,会报错 Cannot read property 'CommonsChunkPlugin ...

  8. 记一次真实的webpack优化经历

    前言 公司目前现有的一款产品是使用vue v2.0框架实现的,配套的打包工具为webpack v3.0.整个项目大概有80多个vue文件,也算不上什么大型项目. 只不过每次头疼的就是打包所耗费的时间平 ...

  9. Webpack--自学笔记

    原文--http://webpack.github.io/docs/tutorials/getting-started/ 什么是webpack? webpack是一个模块打包器.webpack把模块( ...

随机推荐

  1. Codeforces 1000 (A~E)

    A Codehorses T-shirts 相同长度之间互相转化即可 #include<iostream> #include<cstdio> #include<cstri ...

  2. WPS Office 2019 for Linux来了

    难得啊,焕然一新. WPS Office 2019 For Linux更新说明 11.1.0.8392 版本主要更新: 修复wpsoffice进程存在时不能关机的问题 修复WPS文字模块web版式下拖 ...

  3. 【HDU - 1257】最少拦截系统(贪心)

    最少拦截系统 Descriptions: 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的 ...

  4. PHP 遍历一个文件夹下所有文件和子文件夹的方法

    话不多说,直接上代码 <?php function my_dir($dir) { $files = []; if(@$handle = opendir($dir)) { while(($file ...

  5. 跟我一起玩Win32开发(1):关于C++的几个要点

    我不知道各位,一提起C++,第一感觉是什么?而据俺的观察,许多人几乎成了“谈C色变”.不管是C还是C++,一直以来都被很多人视为相当难学的玩意儿,幸好只是一个C++,没有C--,C**和C//,不然, ...

  6. Lightoj 1044 - Palindrome Partitioning (DP)

    题目链接: Lightoj  1044 - Palindrome Partitioning 题目描述: 给一个字符串,问至少分割多少次?分割出来的子串都是回文串. 解题思路: 先把给定串的所有子串是不 ...

  7. Codeforces Round #261 (Div. 2) D

    Description Parmida is a clever girl and she wants to participate in Olympiads this year. Of course ...

  8. Java图解

    java虚拟机 JVM运行过程: java开发工具包 java入门图解1 java入门图解2 java入门图解3 java入门图解4

  9. Lock wait timeout exceeded; try restarting transaction linux设置mysql innodb_lock_wait_timeout

    root权限下: vi /etc/my.cnf 在[mysqld]配置下面加入 innodb_lock_wait_timeout=value # value是你想设置的值 重启mysql /etc/i ...

  10. P1116 车厢重组

    题目描述 在一个旧式的火车站旁边有一座桥,其桥面可以绕河中心的桥墩水平旋转.一个车站的职工发现桥的长度最多能容纳两节车厢,如果将桥旋转180度,则可以把相邻两节车厢的位置交换,用这种方法可以重新排列车 ...