webpack多页面应用打包问题-新增页面打包JS影响旧有JS资源
webpack多页面应用打包问题:
如果在项目里新增页面,pages目录中插入一个页面文件,然后打包代码,在webpack3中,新增页面文件上方文件打包出来的JS文件内容全部会改变,点击查看比对,发现问题如下图所示:
原来是打包出来的文件,包映射都是用数字来对应的.

在webpack4中,production生产环境,optimization这个配置设置 namedChunks: true
此时打包出来的文件,包映射都是用文件名字来对应的.如下图所示:

并且经过我多次比对,发现文件大小才增加几个字节.
这样新增的页面打包出来的文件不会影响旧有的文件.这种配置下,可以让JS文件缓存更安全,怎么新增页面都无所谓了.
以前webpack3.0这个问题一直忽略不管,今天无意间发现4.0这个功能,真是得来全不费工夫.
optimization配置为
{
namedChunks: true,
runtimeChunk: {
name: "manifest"
},
minimizer: [
new UglifyJsPlugin({parallel: true}),
new OptimizeCSSAssetsPlugin({}),
]
}
webpack多页面应用打包问题-新增页面打包JS影响旧有JS资源的更多相关文章
- vue+webpack 打包文件 404 页面空白
最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...
- 基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用
一.解决什么问题 1.html中img引入的图片地址没有被替换,找不到图片 2.html公共部分复用问题,如头部.底部.浮动层等 二.html中img引入图片问题解决 1.在index.html插入i ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 当新增页面和编辑页面使用同一jsp时
<c:if test="${type eq '1'}"><title>新增页面</title></c:if> <c:if te ...
- vue打包后刷新页面报错:Unexpected token <
前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有 ...
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_06-新增页面-前端-新增页面
新建一个添加的页面 复制page_list页面改改名字 page_add 一个标准的页面 <template> <div> 新增页面 </div> </tem ...
- 微信小程序:快速新增页面和组件的方法
一.快速新增页面的方法: 1.在vscode中的app.json文件中的pages数组的第一行新增一个路径,如: 2.在微信开发者工具中的app.json中的新增一个空格,然后保存,就会生成一个新的页 ...
- Springboot项目打包后的页面丢失问题(thymeleaf报错)
遇到的问题目前找到两种: 返回视图路径以/开头,例如 /test/hello 在thymeleaf页面中,引入的页面以/开头,例如:<footer th:replace="/index ...
- webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误
一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...
随机推荐
- 作为前端的你,CC游戏开发可以上车
1. 初来乍到 打开 Cocos Creator 点击新建空白项目,在默认布局的左下区域,一个黄黄assets文件夹映入眼帘.作为前端的你对这个文件是不是再熟悉不过了.是的,和你想象的一样,开发游戏中 ...
- LR(1)语法分析器生成器(生成Action表和Goto表)java实现(二)
本来这次想好好写一下博客的...结果耐心有限,又想着烂尾总比断更好些.于是还是把后续代码贴上.不过后续代码是继续贴在BNF容器里面的...可能会显得有些臃肿.但目前管不了那么多了.先贴上来吧hhh.说 ...
- 控制台基于Quartz.Net组件实现定时任务调度(一)
前言: 你曾经需要应用执行一个任务吗?比如现在有一个需求,需要每天在零点定时执行一些操作,那应该怎样操作呢? 这个时候,如果你和你的团队是用.NET编程的话,可以考虑使用Quartz.NET调度器.允 ...
- 主成分分析 Principle Component Analysis
一.主要思想 利用正交变换把可能线性相关变量表示的观测数据,转换为由少数几个线性无关变量(主成分)表示的数据.(重构原始特征空间:线性降维) 要尽可能保留原始数据中的信息,两个思路:最大投影方差.最小 ...
- linux学习总结--linux100day(day2)
Linux中的哲学--一切皆文件 为了便于操作,我们可以使用secureCRT或Xshell连接到我们的虚拟机. 要用远程工具连接到虚拟机上,我们只需要打开虚拟机上的ssh服务,在xshell中填写主 ...
- intellIJ IDEA学习笔记3
intellij idea 的快捷鍵 https://blog.csdn.net/wei83523408/article/details/60472168 https://www.cnblogs.co ...
- TP5使用API时不可预知的内部异常
最常见的错误形式例如 controller不存在或者 action不存在之类的 我们第一时间想到的 就是 使用 try{}catch(){} 来捕获 例如: /** * show方法在common里定 ...
- JVM类生命周期概述:加载时机与加载过程
一个.java文件在编译后会形成相应的一个或多个Class文件,这些Class文件中描述了类的各种信息,并且它们最终都需要被加载到虚拟机中才能被运行和使用.事实上,虚拟机把描述类的数据从Class文件 ...
- STL 队列
头文件 #include <queue> 定义 普通队列: queue < int > q; 优先队列: priority_queue < int, vector< ...
- C/C++ 数据类型
C/C++ 数据类型 C语言包含5个基本数据类型: void, integer, float, double, 和 char. 类型 描述 字节数 取值范围 void 空类型 1 int 整型 4 - ...