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 ...
随机推荐
- AUTOSAR学习之RTE - 可运行实体
本文介绍RTE的运行体(runnable). An AUTOSAR component defines one or more "runnable entities". A run ...
- modbus-tcp协议讲解
MODBUS功能码简介 代码 中文名称 位操作/字操作 操作数量 01h 读线圈状态 位操作 单个或多个 02h 读离散输入状态(只能读到0或1) 位操作 单个或多个 03h 读保持寄存器(保持寄存器 ...
- 使用IDEA打包scala程序并在spark中运行
一.首先配置ssh无秘钥登陆, 先使用这条命令:ssh-keygen,然后敲三下回车: 然后使用cd .ssh进入 .ssh这个隐藏文件夹: 再创建一个文件夹authorized_keys,使用命令t ...
- python基础--列表,元组
list1 = [1,2,3,4,5,6]list2 = ['wang','cong']# 1对列表中的元素取值(通过索引)print(list1[3]) # 4print(list2[1]) # c ...
- (八)c#Winform自定义控件-分割线
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...
- gcd 和 同余方程(Exgcd)
求关于x的同余方程 ax≡1(mod b) 的最小正整数解. 对于 100%的数据,2≤a,b≤2*109. NOIP 2012 提高组 第二天 第一题 (只看Exgcd的自行跳过这段文字) 先撇开扩 ...
- CAD2015 C#二次开发 字体变形
开发环境:VS2012问题描述:一个简单的WinForm窗口,一个群组控件和一个Label,都是微软雅黑12pxCAD2015下,看起来却不一样,一个明显细得多. CAD2014下,无此问题.实验了C ...
- 网页如何设置favicon.ico
1.首先制作ico图,并命名favicon.ico 2.将文件放在项目的根目录下
- 解决pyinstaller打包可执行文件,存放路径包含中文无法运行的问题
一.实验环境 1.Windows7x64_SP1 2.anaconda2.5.0 + python2.7(anaconda集成,不需单独安装) 3.pyinstaller3.0 二.问题描述 1.使用 ...
- 二级小兵——工厂模式(Factory Method)
前言 上一篇我们介绍了单例模式,今天给大家讲一个比较简单的模式——工厂模式(Factory Method),工厂模式又是什么呢?顾名思义,工厂——生产制造东西的地方.那么应用在程序当中该如何使用.并且 ...