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资源的更多相关文章

  1. vue+webpack 打包文件 404 页面空白

    最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...

  2. 基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用

    一.解决什么问题 1.html中img引入的图片地址没有被替换,找不到图片 2.html公共部分复用问题,如头部.底部.浮动层等 二.html中img引入图片问题解决 1.在index.html插入i ...

  3. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  4. 当新增页面和编辑页面使用同一jsp时

    <c:if test="${type eq '1'}"><title>新增页面</title></c:if> <c:if te ...

  5. vue打包后刷新页面报错:Unexpected token <

    前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有 ...

  6. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_06-新增页面-前端-新增页面

    新建一个添加的页面 复制page_list页面改改名字 page_add 一个标准的页面 <template> <div> 新增页面 </div> </tem ...

  7. 微信小程序:快速新增页面和组件的方法

    一.快速新增页面的方法: 1.在vscode中的app.json文件中的pages数组的第一行新增一个路径,如: 2.在微信开发者工具中的app.json中的新增一个空格,然后保存,就会生成一个新的页 ...

  8. Springboot项目打包后的页面丢失问题(thymeleaf报错)

    遇到的问题目前找到两种: 返回视图路径以/开头,例如 /test/hello 在thymeleaf页面中,引入的页面以/开头,例如:<footer th:replace="/index ...

  9. webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

随机推荐

  1. JS节流和防抖函数

    一. 实现一个节流函数 // 思路:在规定时间内只触发一次function throttle (fn, delay) {  // 利用闭包保存时间  let prev = Date.now()  re ...

  2. Spring 源码学习(一)-容器的基础结构

    关注公众号,大家可以在公众号后台回复“博客园”,免费获得作者 Java 知识体系/面试必看资料 展示的代码摘取了一些核心方法,去掉一些默认设置和日志输出,还有大多数错误异常也去掉了,小伙伴想看详细代码 ...

  3. Docker 架构原理及简单使用

    提示:文中有些内容为大神的博客内容,就不统一标注那里引用,只是再最下面标注参考连接谢谢 一.简介 1.了解docker的前生LXC LXC为Linux Container的简写.可以提供轻量级的虚拟化 ...

  4. Java中的魔法类-Unsafe

    Unsafe是位于sun.misc包下的一个类,主要提供一些用于执行低级别.不安全操作的方法,如直接访问系统内存资源.自主管理内存资源等,这些方法在提升Java运行效率.增强Java语言底层资源操作能 ...

  5. SonarQube系列一、Linux安装与部署

    [前言] 随着项目团队规模日益壮大,项目代码量也越来越多.且不说团队成员编码水平层次不齐,即便是老手,也难免因为代码量的增加和任务的繁重而忽略代码的质量,最终的问题便是bug的增多和代码债务的堆积.因 ...

  6. Oracle delete和truncate实践操作之一

    实践说明 本文章主要记录在Oracle中,delete和truncate进行数据删除之后,如何进行数据恢复.由于网上对delete和truncate的区别说明较多,此处不过多介绍两者区别. 注:由于环 ...

  7. 云上RDS架构

    概述 越来越多的企业选择上云,最基础的云服务就是IaaS(Infrastructure as a Service)服务,直观理解就是虚拟主机,用户不用再自建机房,自己购买服务器,而是直接向云厂商购买虚 ...

  8. Java基础及JavaWEB以及SSM框架学习笔记Xmind版

    Java基础及JavaWEB以及SSM框架学习笔记Xmind版 转行做程序员也1年多了,最近开始整理以前学习过程中记录的笔记,以及一些容易犯错的内容.现在分享给网友们.笔记共三部分. JavaSE 目 ...

  9. Android开发之输入框EditText介绍

    这篇文章主要为大家详细介绍了Android布局之输入框EditText设计,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 现在先简单介绍一下技术点: 1.如何使用圆角输入框和按钮背景 2.如何实现 ...

  10. Selenium3 + Python3自动化测试系列六——等待方式

    等待 一.等待是什么,为什么要等待 在做自动化测试,设计测试用例的时候,有时下一步的操作会依赖上一步的结果或者内容,上一步操作成功之后才能进行下一步操作等, 这时候,我们就需要使用等待,来判断上一步操 ...