webpack配置

一、很多基础方面的配置被vuecli所集成一般项目都是使用vuecli,不会真正的去从0-1进行webpack配置:

1、vuecli中的webpack基础配置:

(1)入口文件默认在src/main;输出在dist;

(2)集成了大量的插件和加载器:babel-loader 处理 JavaScript 文件、使用 css-loader 和 style-loader 处理 CSS 文件;html-webpack-plugin 自动生成 HTML 文件等

(3)集成了我们的路径别名:@

(4)开启了webpack缓存:webapck打包构建时,每次需要编译文件,利用缓存机制减少重复编译和打包的时间,从而提高开发效率和构建速度

(5)模式:集成了生产和开发两种模式:在开发模式下,使用 webpack-dev-server 启动本地开发服务器,并自动进行热更新;在生产模式下,会启用一些插件进行js和css代码压缩;

(6)还需要注意:在生产环境下,webpack打包生成的js文件是带hash值的,所以会保证我们每次发完包之后刷新页面,会请求到服务端的最新文件(因为文件名都变了,新的请求会拿到新的文件);;;但是打开发环境的包时,webpack打包生成的js文件不会带hash值,所以开发sit环境重新发包后刷新页面,可能拿到的资源不是最新的,需要清除浏览器缓存重新请求,或者配置打包后生成的js文件名

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

注意:配置打包后的js文件name属性,为name添加hash值,hash分为三种:hash和chunkhash和contenthash;;;在打开发包sit包时,三种配置没什么区别,每次打包hash值都会变化;但是打生产包时区别很大:(1)如果设置name为hash:每次打包都会生成js文件名都会变化;(2)chunkhash以chunkhash为单位,只有当前包内容变化时,打包后的js文件名才会变化:(3)contenthash以文件为单位,当文件内容变化时,打包对应的js文件name值才会变化,其他包name值不变;

使用chunkhash和contenthash的话有利于实现更精确的缓存机制;

在这里插入图片描述

二、其他的基础配置:

(1)是否生成sourseMap映射文件

(2)自定义打包的输出目录outputDir

(3)proxy配置跨域代理,

(4)配置浏览器请求的baseUrl,如以下路径中的/win/mgmt/web.即端口号和路由之前的url;

http://10.30.1.120:9090/win/mgmt/web/index.html#/product-manage/rated-code-config

(5)配置生产环境下去除代码注释和console.log

(6)配置拆包splitchunks:test正则匹配第三方包;common包,模块被公用几次以上;app主js文件以minSize为判断基准;

(7)配置打包分析工具,bundleAnalyse插件可以直观的看到打包后的js文件大小,然后进行对应的优化,好比第三方模块包实在太大,可以考虑使用CDN,配置externals忽略一些第三方库;

在这里插入图片描述

8、配置svg- - -:后管系统中的菜单iCON是svg图片

9、配置我们的SASS全局公共变量:在这里插入图片描述

10、配置压缩插件:图片压缩、Gzip压缩等;

11、配置打包后生成的文件名:hash(3种),可以使用chunkhash或者contenthash来实现只有内容改变时,打包生成的bundle名字才会改变,刷新页面的时候只请求改变了的bundle即可;;;;注意打开发包时三种hash一样,不管改没改变都会每次打的bundle都会变化;

三、提高webpack构建速率(webpack构建大体流程便是从入口文件开始,查找模块依赖关系(递归模块和依赖模块),生成依赖树(图),然后构建编译生成一个或者多个bundle.js)

1、缩小文件的搜索范围:可以配置extensions限制搜索列表:resolve.extensions中列出项目中实际使用的后缀名;可以将最常用的后缀扩展名放在最前面

在这里插入图片描述

2、优化resolve.alias配置文件路径别名:好处就是webpack直接会去对应别名的目录查找模块,减少了搜索时间;

3、noParse:指定不需要解析的模块,一般是第三方模块(不需要改动);

4、拆包:减少每次构建时需要处理的模块数量;

5、webpack缓存:Webpack 执行打包构建过程中,可以利用缓存机制减少重复编译和打包的时间,vuecli中默认开启了;

6、配置多线程的插件:parallel-uglify-plugin,是一个用于并行压缩 JavaScript 代码的 Webpack 插件,在传统的 UglifyJS 插件中,代码压缩是单线程进行的,当需要压缩大量的 JavaScript 代码时,会造成构建过程的阻塞,导致构建时间较长。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/665806.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于控制台的购书系统(Java 语言实现)

📚博客主页:爱敲代码的小杨. ✨专栏:《Java SE语法》|《数据结构与算法》 ❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️ 🙏小杨水平有限,欢…

C++棋类小游戏2

今天给大家带来我花了1周时间自创的小游戏的升级版,博主还是一名小学生,希望大家提提意见。这是我写的最长的C代码,希望大家喜欢,不要抄袭,任何编译器都可以。 以前版本——C自创棋类小游戏-CSDN博客 C内容提示&…

苹果CMS挖片网升级版视频主题模版源码

自适应视频站正版高级挖片网收录模板,模板不错,是挖片网的升级版。 源码下载:https://download.csdn.net/download/m0_66047725/88799583 更多资源下载:关注我。

解决maven 在IDEA 下载依赖包速度慢的问题

1.idea界面双击shift键 2.打开setting.xml文件 复制粘贴 <?xml version"1.0" encoding"UTF-8"?> <settings xmlns"http://maven.apache.org/SETTINGS/1.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sc…

深度学习实战 | 卷积神经网络LeNet手写数字识别(带手写板GUI界面)

引言 在深度学习领域&#xff0c;卷积神经网络&#xff08;Convolutional Neural Network, CNN&#xff09;是一种广泛应用于图像识别任务的神经网络结构。LeNet是一种经典的CNN结构&#xff0c;被广泛应用于基础的图像分类任务。本文将介绍如何使用LeNet卷积神经网络实现手写…

Transformer实战-系列教程4:Vision Transformer 源码解读2

&#x1f6a9;&#x1f6a9;&#x1f6a9;Transformer实战-系列教程总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 4、Embbeding类 self.embeddings Embeddings(config, img_sizeimg_size) class Embeddings(nn.…

(已解决)spingboot 后端发送QQ邮箱验证码

打开QQ邮箱pop3请求服务&#xff1a;&#xff08;按照QQ邮箱引导操作&#xff09; 导入依赖&#xff08;不是maven项目就自己添加jar包&#xff09;&#xff1a; <!-- 邮件发送--><dependency><groupId>org.springframework.boot</groupId><…

vite打包原理

vite 工程化开发&#xff1a;打包工具 启动速度很快 核心原理还是webpack 把webpack封装了&#xff0c;把webpack对象封装了 和vue2整体结构几乎一致 webpack两种模式&#xff1a;开发&生产 代码打包编译&#xff0c;本地起一个web服务器实时预览编译后的结果 build 命令模…

2024.2.3

单向循环链表的头插 头删 尾插和尾删 //头结点插入 Linklist insere_element(Linklist head,datatype element) {Linklist screat();s->dataelement;if(NULLhead){heads;}else{Linklist phead;while(p->next!head){pp->next;}s->nexthead;heads;p->nexthead;}r…

太强了,AI数字人从制作到变现一次搞定

AI数字人从制作到变现 如果说GPT类大模型是我们人类的第二大脑&#xff0c;数字人就是我们人类在互联网上的第二个身体。随着 AI 的迅速发展&#xff0c;2024 年 AI 模型开始从大型语言模型向大型视觉模型转变。数字人技术作为其分支之一&#xff0c;正日益成为科技、娱乐、教…

Unity项目从built-in升级到URP(包含早期版本和2023版本)

unity不同版本的升级URP的方式不一样&#xff0c;但是大体流程是相似的 首先是加载URP包 Windows -> package manager,在unity registry中找到Universal RP 2023版本&#xff1a; 更早的版本&#xff1a; 创建URP资源和渲染器​​ 有些版本在加载时会自动创建&#…

ProcessSlot构建流程分析

ProcessorSlot ProcessorSlot构建流程 // com.alibaba.csp.sentinel.CtSph#lookProcessChain private Entry entryWithPriority(ResourceWrapper resourceWrapper, int count, boolean prioritized, Object... args)throws BlockException {// 省略创建 Context 的代码// 黑盒…

Optimizer:基于.Net开发的、提升Windows系统性能的终极开源工具

我们电脑使用久了后&#xff0c;就会产生大量的垃圾文件、无用的配置等&#xff0c;手动删除非常麻烦&#xff0c;今天推荐一个开源工具&#xff0c;可以快速帮助我们更好的优化Windos电脑。 01 项目简介 Optimizer是一个面向Windows系统的优化工具&#xff0c;旨在提升计算机…

Qt应用软件【数据篇】大小端数据转换

文章目录 大小端数据介绍大小端数据在内存中的样子C大小端数据转换QtAPI大小端转换 大小端数据介绍 大端&#xff08;Big Endian&#xff09;和小端&#xff08;Little Endian&#xff09;是一种描述计算机存储多字节数据的方式。 想象一下&#xff0c;你有一串数字&#xff0c…

vulhub中spring的CVE-2022-22947漏洞复现

Spring Cloud Gateway是Spring中的一个API网关。其3.1.0及3.0.6版本&#xff08;包含&#xff09;以前存在一处SpEL表达式注入漏洞&#xff0c;当攻击者可以访问Actuator API的情况下&#xff0c;将可以利用该漏洞执行任意命令。 参考链接&#xff1a; https://tanzu.vmware.c…

【用Unity开发一款横板跳跃游戏部分需要学习的技术点指南】

*** 用Unity开发一款横板跳跃游戏部分需要学习的技术点指南 空洞骑士是一款基于横板平台跳跃的传统风格2D动作冒险游戏&#xff0c;庞大的游戏世界交错相通&#xff0c;玩家控制小虫子去探索幽深黑暗的洞穴&#xff0c;成为了一代人茶余饭后的惦念&#xff0c;深受玩家喜爱。 …

类银河恶魔城学习记录1-6 Flip基本设置源代码 P33

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Player.cs using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; us…

JAVA 反射和动态管理(二十-完)

反射和动态管理&#xff08;二十-完&#xff09; 反射 反射允许对字段&#xff08;成员变量&#xff09;&#xff0c;成员方法&#xff0c;构造方法的信息进行编程访问。 反射操作可分为获取和解刨。 获取不是从java文件获取&#xff0c;而是从class字节码文件获取。 作用…

MySQL全表扫描:性能杀手的隐患与优化策略

MySQL全表扫描&#xff1a;性能杀手的隐患与优化策略 MySQL数据库作为常用的关系型数据库管理系统之一&#xff0c;全表扫描问题一直困扰着开发者。本文将深入剖析MySQL全表扫描的原理、其对性能的严重影响&#xff0c;同时提供一系列优化策略&#xff0c;助您高效应对MySQL性能…

【NodeJS】fs 模块 (2)

流式文件写入 & 读取 流式文件写入 / 读取适合操作大文件 流式写入 ① 创建可写流&#xff1a;fs.createWriteStream(path[, options]) path&#xff1a;文件路径options&#xff1a;配置对象 flags&#xff1a;文件系统标志&#xff0c;默认值为 wencoding&#xff1a;…