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 ...
随机推荐
- PYNQ上手笔记 | ① 启动Pynq
现在人工智能非常火爆,一般的教程都是为博硕生准备的,太难看懂了,分享一个非常适合小白入门的教程,不仅通俗易懂而且还很风趣幽默,点☞这里☜进入传送门~ = = = = 我是华丽的分割线 = ...
- 章节十五、6-log4 2-用默认的配置
一.实例演示 package log4jtutorial; import org.apache.logging.log4j.LogManager; import org.apache.logging. ...
- 夯实Java基础(九)——final关键字
1.前言 Java语言中的final关键字,想必大家都不是很陌生,我们自己用的最多的应该是用来定义常量吧,那么今天我们就来了解final这个关键字的用法,这个关键字还是非常简单的. final从字面意 ...
- java高并发系列 - 第23天:JUC中原子类,一篇就够了
这是java高并发系列第23篇文章,环境:jdk1.8. 本文主要内容 JUC中的原子类介绍 介绍基本类型原子类 介绍数组类型原子类 介绍引用类型原子类 介绍对象属性修改相关原子类 预备知识 JUC中 ...
- 对vue中nextTick()的理解及使用场景说明
异步更新队列: 首先我们要对vue的数据更新有一定理解: vue是依靠数据驱动视图更新的,该更新的过程是异步的. 即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新 ...
- Go中的函数和闭包
函数参数和返回值的写法 如果有多个参数是同一个类型,可以简略写: func testReturnFunc(v1,v2 int)(int,int) { x1 := 2 * v1 x2 := 3 * v2 ...
- alluxio源码解析-层次化存储(4)
层次化存储-特性介绍: https://www.alluxio.org/docs/1.6/cn/Tiered-Storage-on-Alluxio.html 引入分层存储后,Alluxio管理的数据块 ...
- idea+Spring+Mybatis+jersey+jetty构建一个简单的web项目
一.先使用idea创建一个maven项目. 二.引入jar包,修改pom.xml <dependencies> <dependency> <groupId>org. ...
- 普通Apache的安装与卸载
Apache安装与卸载ctrl+F快捷查找 1.下载apache 64位解压 官网:http://httpd.apache.org/ 文件使用记事本或者sublime2.修改 打开apache目录下的 ...
- 开发规范 小白进阶 python代码规范化
开发规范 软件开发,规范项目的目录结构,代码规范,遵循 PeP8规范等等,让你更加清晰的,合理开发 一功能分类(文件名) settings.py配置文件 配置文件放一些静态参数, 划归固定的路径,文件 ...