归纳webpack
常用配置项
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通常用于生成HTML
const MiniCssExtractPlugin = require('mini-css-extract-plugin');// 用于分离CSS
const cssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 用于压缩CSS
{mode: 'development',devtool: 'source-map',entry: {// key: index作为打包后的产物名称 与output中的 【name】对应index: path.resolve(__dirname, './src/index.tsx')},// 类似在package.json中加上打包的-w命令 文件变动重新编辑watch:true,output: {path: path.resolve(__dirname, './dist'),filename: 'js/[name].[contenthash:8].js',// const TipPage = import(/* webpackChunkName: "tipPage" */ '@/views/TipPage') // 该组件打包后变成 tipPage.chunk.jschunkFilename: 'js/[name].chunk.js',assetModuleFilename: 'assets/[name].[contenthash][ext]',clean: true},resolve: {// 用于导入模块时不需要写出完整的文件名,(当文件名一样,后缀不一样时,按照从左到右的优先级读取文件)extensions: ['.ts', '.tsx', '.js', '.jsx'],alias: {'@': path.resolve(__dirname, './src'),},},module: {rules: [{test: /\.css$/,use: [//抽离css除了配置插件 还需配置该loaderMiniCssExtractPlugin.loader,// ‘style-loader'{loader: "css-loader",options: {// esModule: true 搭配 namedExport: true 使用,esModule: false,modules: {mode: "local",// 如果引入样式 undefined 可加入该配置项 使样式可以默到处导出// namedExport: false,localIdentName: "[local]--[hash:base64:5]",},},},// 给需要兼容不同浏览器的样式加前缀 但需要配合postcss插件使用在postcss-config.js中配置"postcss-loader",]},{test: /\.s[ac]ss$/,use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],},]},plugins: [// 在组件中无需再引入react和loadshnew webpack.ProvidePlugin({_: 'lodash',react: 'react'}),// 直接实例化插件new webpack.optimize.CommonsChunkPlugin({name: 'vendor',minChunks: function (module) {// 将所有node_modules中的代码打包到vendor chunk中return module.context && module.context.includes('node_modules');}}),new HtmlWebpackPlugin({template: 'index.html',filename: "app.html",// 生成的js文件会在打包后的app.html的body中使用script引入inject: "body",}),// 抽离css 压缩css需要使用 cssMinimizerWebpackPluginnew MiniCssExtractPlugin({filename: 'styles/[contenthash:8].css'})]// webpack编译的时候只输出错误和警告信息stats: 'errors-warnings',devServer: {// 控制台只输出错误和警告信息stats: 'errors-warnings',hot: true,port: 3000,// 解决history路由刷新页面404问题。// Webpack Dev Server 在找不到路由对应的文件时,始终返回 index.html,以保证前端路由可以正确处理。historyApiFallback: true,proxy: {'/api': {target: 'http://localhost:8888',changeOrigin: true,pathRewrite: {'^/api': '',},},},client: {// 配置是否在浏览器中显示编译错误或警告的覆盖层overlay: false,},optimization: {// tree-shaking 极简主义 去掉所有未使用到的模块代码 第三方包除外usedExports: true,// 配合package.json中的sideEffects 只有css有副作用 其他代码会被删除//"sideEffects": [// "*.css"//],},},
}
一般打包优化配置
{bail: true, // 在构建过程中遇到第一个错误时立即停止构建,并返回错误信息// 配置项包名不会被打包,而是直接从window中取(需要将忽略的包在index.html中引入)externals: {react: 'React','react-dom': 'ReactDOM',},optimization:{splitChunks: {cacheGroups: {//node_modules[中的文件会被打包到定义好的chunkFilename即vender.js文件中vendor: {name: 'vendors',test: /[\\/]node_modules[\\/]/,chunks: 'all',},default: {// 非node_modules产物打包后文件名由entry配置决定minChunks: 2,priority: -20,reuseExistingChunk: true, // 复用打包好的模块},},},},// 压缩css需要mode配置为production 否则不会进行压缩minimizer: [new cssMinimizerWebpackPlugin()],
}
缓存
// 内存缓存: 速度快,配置简单,但占用内存且重启后失效
cache: {type: 'memory',
}// 磁盘缓存 (filesystem):持久性好,适合大型项目,但速度较慢,配置相对复杂。
cache: {type: 'filesystem',buildDependencies: {config: [__filename], // 配置文件的路径},cacheDirectory: path.resolve(__dirname, '.cache'), // 缓存目录
}// 总结:
1、开发模式用内存缓存,电脑内存不够的误用;
2、生产模式用磁盘缓存,持久化缓存,进程重启后仍然可以使用缓存
postcss.config.js
module.exports = {// 自动给部分需要兼容的样式添加前缀plugins: [require("autoprefixer"),//允许css嵌套(当不在less等css预编译器中时 支持嵌套)require("postcss-nested"),],
};
多页面配置
entry: {main: {import: ["./src/app.js", "./src/app2.js"],// 这样配置 即使app.js用到了lodash 也不会打包lodash到main.js产生的bundle中dependOn: "lodash",// bundle输出路径filename: "channel1/[name].[contenthash:8].js",},main2: {import: "./src/app3.js",dependOn: "lodash",filename: "channel2/[name].[contenthash:8].js",},// lodash: "lodash",lodash: {import: "lodash",filename: "common/[name].js",},
},
output: {// entry若配置了filename 优先级大于此处filename: "[name].[contenthash:8].js",clean: true,
},
plugins: [new HtmlWebpackPlugin({// 配合模版中的<%= htmlWebpackPlugin.options.title %>使用// eg: <title><%= htmlWebpackPlugin.options.title %></title>title: "多页面应用test",template: "./index.html",inject: "body",filename: "channel1/index.html",// 配置根据模版生成的index.html中引入的chunkchunks: ["main", "lodash"],publicPath: "http://www.a.com/",}),new HtmlWebpackPlugin({template: "./index2.html",inject: "body",filename: "channel2/index2.html",chunks: ["main2", "lodash"],publicPath: "http://www.b.com/",}),
],
相关文章:
归纳webpack
常用配置项 const HtmlWebpackPlugin require(html-webpack-plugin); // 通常用于生成HTML const MiniCssExtractPlugin require(mini-css-extract-plugin);// 用于分离CSS const cssMinimizerWebpackPlugin require("css-minimizer-webpack-plugin"); // 用于压…...
Web APP 阶段性综述
Web APP 阶段性综述 当前,Web APP 主要应用于电脑端,常被用于部署数据分析、机器学习及深度学习等高算力需求的任务。在医学与生物信息学领域,Web APP 扮演着重要角色。在生物信息学领域,诸多工具以 Web APP 的形式呈现ÿ…...
SpringBoot之OriginTrackedPropertiesLoader类源码学习
源码解析 /*** 作用是从给定的资源(如文件或输入流)中加载 .properties 文件,* 并将属性键值对转换为带有来源信息(origin)的 OriginTrackedValue 对象。*/ public class OriginTrackedPropertiesLoader {private fin…...
Flask学习入门笔记
Flask学习入门笔记 前言1. 安装Flask2. 创建一个简单的Flask应用3. 路由与视图函数3.1 基本路由3.2 动态路由3.3 HTTP方法 4. 请求与响应4.1 获取请求数据4.2 返回响应 5. 模板渲染5.1 基本模板渲染5.2 模板继承 6. 静态文件6.1 静态文件的目录结构6.2 在模板中引用静态文件6.2…...
List 接口的实现类
在 Java 中,List 是一个非常常用的接口,提供了有序、可重复的元素集合。List 接口有多个实现类,每个实现类都有其特定的特性和适用场景。以下是 Java 中主要实现了 List 接口的类及其详细介绍。 1. 常见的 List 实现类 1.1 ArrayList 简介&…...
SpringCloud-基于Docker和Docker-Compose的项目部署
一、初始化环境 1. 卸载旧版本 首先,卸载可能已存在的旧版本 Docker。如果您不确定是否安装过,可以直接执行以下命令: sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logro…...
【人工智能】Python中的自动化机器学习(AutoML):如何使用TPOT优化模型选择
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 随着机器学习在各行业的广泛应用,模型选择和优化成为了数据科学家面临的主要挑战之一。自动化机器学习&am…...
Kafka 超级简述
Kafka 就是一个 分布式的消息系统,它帮助不同的系统和应用之间传递信息。可以把它想象成一个超级高效的 “邮局”: 生产者(Producer) 就是把信息(消息)送到这个 “邮局” 的人。消费者(Consume…...
tomcat项目运行后报500
HTTP状态 500 - 内部服务器错误 类型 异常报告消息 实例化Servlet类[com.mdy.servlet_02.LifeDemoServlet]异常描述 服务器遇到一个意外的情况,阻止它完成请求。例外情况jakarta.servlet.ServletException: 实例化Servlet类[com.mdy.servlet_02.LifeDemoServlet]异常…...
Chapter1:初见C#
参考书籍:《C#边做边学》; 1.初见C# 1.1 C#简介 C # {\rm C\#} C#编写了许多完成常用功能的程序放在系统中,把系统中包含的内容按功能分成多个部分,每部分放在一个命名空间中,导入命名空间语法格式如下: /…...
SQL-leetcode—620. 有趣的电影
620. 有趣的电影 表:cinema ------------------------ | Column Name | Type | ------------------------ | id | int | | movie | varchar | | description | varchar | | rating | float | ------------------------ id 是该表的主键(具有唯一值的列)。 每行包含…...
《鸿蒙Next平台:决策树面对噪声数据的鲁棒性逆袭》
在机器学习领域,决策树是一种强大的模型,但训练数据中的噪声往往会影响其性能和鲁棒性。在鸿蒙Next平台上,我们可以采用多种策略来增强决策树模型在面对噪声数据时的鲁棒性。 数据预处理层面 数据清洗:利用鸿蒙Next平台的数据处理…...
minio https配置
如果使用了官网的教程 使用minio-user作为启动用户 准备好:文件名要定死,因为minio只认识key和crt文件 将xxxxx.key重命名为private.key 将xxxxx.pem重命名为public.crt 将这两个文件放到/home/minio-user/.minio/certs/ 目录下 chown -r minio…...
Windows重装后NI板卡LabVIEW恢复正常
在重新安装Windows系统后,NI(National Instruments)板卡能够恢复正常工作,通常是由于操作系统的重新配置解决了之前存在的硬件驱动、兼容性或配置问题。操作系统重装后,系统重新加载驱动程序、清理了潜在的冲突或损坏的…...
Spring Initializr创建springboot项目 “java: 错误: 无效的源发行版:19”
我用的1.8的jdk,排查发现这是jdk和springboot版本冲突导致的。 1、File->Project Structure->Module->source和dependancies改成相应的版本 2、File->Setting->Build,Execution,Deployment->Compiler->Java Compiler->target bytecode ver…...
Vue computed属性原理及其惰性求值特点
1,computed属性 在 Vue.js 中, computed 属性是 Vue 响应式系统的一个核心特性,它允许开发者声明式地描述一个依赖其他响应式属性的计算值。 computed 属性是基于它们的依赖进行缓存的,只有当依赖发生变化时,它们才会…...
关于在 Kotlin DSL 中,ndk 的配置方式
在 Kotlin DSL 中,ndk 的配置方式有所不同,取决于 Android Gradle 插件版本。ndk { abiFilters(…) } 在 Kotlin DSL 中实际上是 externalNativeBuild 的一部分,需要通过正确的上下文调用。 错误代码: ndk {abiFilters("ar…...
机器学习(一)
一, Supervised Machine Learning (监督机器学习) 1,定义:学习X到Y或输入到输出的映射的算法,学习算法从正确答案中学习。即教机器 如何做事情(数据集学习算法模型),根据已有的数据集,知道输入和输出结果 之间的关系,并根据这…...
得物App再迎开放日,全流程体验正品查验鉴别
近日,得物App超级品质保障中心再度迎来了开放日活动。近60位得物App的用户与粉丝齐聚超级品质保障中心,全流程体验正品查验鉴别。开放日当天,参与者有机会近距离观察得物App的商品质检区、鉴别区、收发流转区、实验室和正品库等关键功能区&am…...
《leetcode-runner》【图解】【源码】如何手搓一个debug调试器——表达式计算
前文: 《leetcode-runner》如何手搓一个debug调试器——引言 《leetcode-runner》如何手搓一个debug调试器——架构 《leetcode-runner》如何手搓一个debug调试器——指令系统 《leetcode-runner》【图解】如何手搓一个debug调试器——调试程序【JDI开发】【万字详解…...
Flink概述
一、Flink是什么 二、Flink特点 三、Flink vs SparkStreaming 表 Flink 和 Streaming对比 Flink Streaming 计算模型 流计算 微批处理 时间语义 事件时间、处理时间 处理时间 窗口 多、灵活 少、不灵活(窗口必须是批次的整数倍) 状态 有 …...
【Linux】信号
目录 一、信号的概念二、信号的产生2.1 通过键盘进行信号的产生2.2 通过系统调用进行信号的产生2.2.1 kill函数2.2.2 raise函数2.2.3 abort函数 2.3 通过异常的方式进行信号的产生2.4 通过软件条件的方式进行信号的产生2.4.1 关闭管道读端2.4.2 alarm函数 2.5 Core Dump&#x…...
【漏洞分析】DDOS攻防分析
0x00 UDP攻击实例 2013年12月30日,网游界发生了一起“追杀”事件。事件的主角是PhantmL0rd(这名字一看就是个玩家)和黑客组织DERP Trolling。 PhantomL0rd,人称“鬼王”,本名James Varga,某专业游戏小组的…...
【js进阶】设计模式之单例模式的几种声明方式
单例模式,简言之就是一个类无论实例化多少次,最终都是同一个对象 原生js的几个辅助方式的实现 手写forEch,map,filter Array.prototype.MyForEach function (callback) {for (let i 0; i < this.length; i) {callback(this[i], i, this);} };con…...
【VUE】计算属性+动态样式方法封装
【VUE】父子组件联动实现动态样式控制 【VUE】页面跳转实现动态样式控制 在utils下创建文件夹styleController 编写通用的方法 /*** 样式控制* 本文件主要提供一些动态控制样式的方法*//*** 控制表格表头中的 某些列 是否显示星号** param showStarActions boolean 当值为True时…...
Mac玩Steam游戏秘籍!
Mac玩Steam游戏秘籍! 大家好!最近有不少朋友在用MacBook玩Steam游戏时遇到不支持mac的问题。别担心,我来教你如何用第三方工具Crossover来畅玩这些不支持的游戏,简单又实用! 第一步:下载Crossover 首先&…...
【后端面试总结】tls中.crt和.key的关系
tls中.crt和.key的关系 引言 在现代网络通信中,特别是基于SSL/TLS协议的加密通信中,.crt和.key文件扮演着至关重要的角色。这两个文件分别代表了数字证书和私钥,是确保通信双方身份认证和数据传输安全性的基石。本文旨在深入探讨TLS中.crt和…...
【Axure】配色库
配色库是一个专为设计师和创意工作者打造的在线资源平台,旨在提供丰富的色彩解决方案,帮助用户轻松找到或创造美观和谐的色彩搭配。其中,一个典型的配色库包含了以下几个核心元素: 渐变色:提供多样化的渐变色方案&…...
PL/SQL语言的语法糖
PL/SQL语言的语法糖 引言 PL/SQL(Procedural Language/Structured Query Language)是Oracle公司为其数据库管理系统(DBMS)设计的一种过程化语言。作为一种扩展SQL的语言,PL/SQL不仅支持数据的查询和操作,…...
Pytorch|YOLO
🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者:K同学啊 一、 前期准备 1. 设置GPU 如果设备上支持GPU就使用GPU,否则使用CPU import torch import torch.nn as nn import torchvision.transforms as transforms im…...
doc、pdf转markdown
国外的一个网站可以: Convert A File Word, PDF, JPG Online 这个网站免费的,算是非常厚道了,但是大文件上传多了之后会扛不住 国内的一个网站也不错: TextIn-AI智能文档处理-图像处理技术-大模型加速器-在线免费体验 https://…...
ZooKeeper 常见问题与核心机制解析
Zookeeper集群本身不直接支持动态添加机器。在Zookeeper中,集群的配置是在启动时静态定义的,并且集群中的每个成员都需要知道其他所有成员。当你想要增加一个新的Zookeeper服务器到现有的集群中时,你需要更新所有现有服务器的配置文件&#x…...
期权懂|场内期权合约行权价格是如何设定制度的?
锦鲤三三每日分享期权知识,帮助期权新手及时有效地掌握即市趋势与新资讯! 场内期权合约行权价格是如何设定制度的? 场内期权合约的行权价格是期权合约中的一个关键要素,它决定了期权买方在期权到期日或之前买入(对于…...
处理 SQL Server 中的表锁问题
在 SQL Server 中,表锁是一个常见的问题,尤其是在并发访问和数据更新频繁的环境中。表锁会导致查询性能下降,甚至导致死锁和系统停滞。本文将详细介绍如何识别、分析和解决 SQL Server 中的表锁问题。 什么是表锁? 表锁是 SQL S…...
【Mysql进阶知识】Mysql 程序的介绍、选项在命令行配置文件的使用、选项在配置文件中的语法
目录 一、程序介绍 二、mysqld--mysql服务器介绍 三、mysql - MySQL 命令行客户端 3.1 客户端介绍 3.2 mysql 客户端选项 指定选项的方式 mysql 客户端命令常用选项 在命令行中使用选项 选项(配置)文件 使用方法 选项文件位置及加载顺序 选项文件语法 使用举例&am…...
代码随想录算法训练营总结
本人是一名普普通通的计算机专业的毕业生,在大学学数据结构和算法就感觉非常难,到毕业也没刷过几道题,所幸后来入职的公司也没有考察算法相关的内容。到现在已经工作两年多了,看到过许多聊面试聊算法的文章,也接触到一…...
二进制/源码编译安装mysql 8.0
二进制方式: 1.下载或上传安装包至设备: 2.创建组与用户: [rootopenEuler-1 ~]# groupadd mysql [rootopenEuler-1 ~]# useradd -r -g mysql -s /bin/false mysql 3.解压安装包: tar xf mysql-8.0.36-linux-glibc2.12-x86_64.ta…...
AI 编程工具—Cursor进阶使用 阅读开源项目
AI 编程工具—Cursor进阶使用 阅读开源项目 首先我们打开一个最近很火的项目browser-use ,直接从github 上克隆即可 索引整个代码库 这里我们使用@Codebase 这个选项会索引这个代码库,然后我们再选上这个项目的README.md 文件开始提问 @Codebase @README.md 这个项目是用…...
掌握C语言内存布局:数据存储的智慧之旅
大家好,这里是小编的博客频道 小编的博客:就爱学编程 很高兴在CSDN这个大家庭与大家相识,希望能在这里与大家共同进步,共同收获更好的自己!!! 目录 引言正文一、数据类型介绍1.内置类型2.自定义…...
一键化配置java环境
一键化配置java环境 下载javaPathConfig 打开,将java的jdk路径写进去 例如我的路径就是 C:\Program Files\Java\jdk-1.8点击确认设置即可...
【I/O编程】UNIX文件基础
IO编程的本质是通过 API 操作 文件。 什么是 IO I - Input 输入O - Output 输出 这里的输入和输出都是站在应用(运行中的程序)的角度。外部特指文件。 这里的文件是泛指,并不是只表示存在存盘中的常规文件。还有设备、套接字、管道、链接…...
leetcode 面试经典 150 题:汇总区间
链接汇总区间题序号228题型数组解法一次遍历法难度简单熟练度✅✅✅ 题目 给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说,nums 的每个元素都恰好被某个区间范围所覆盖,并且不存在属…...
联想Android面试题及参考答案
请介绍一下 Android 的架构,并谈谈对 Linux 的了解。 Android 架构主要分为四层,从下往上依次是 Linux 内核层、系统运行库层、应用框架层和应用层。 Linux 内核层是 Android 系统的基础。它提供了底层的硬件驱动程序,包括显示驱动、摄像头驱动、音频驱动等多种硬件设备的驱…...
redux 结合 @reduxjs/toolkit 的使用
1,使用步骤 使用React Toolkit 创建 counterStore(store目录下) --> 为React注入store(src下面的index) --> React组件使用store中的数据(组件) 2,例如下面有一个简单加减的…...
【鱼皮大佬API开放平台项目】Spring Cloud Gateway HTTPS 配置问题解决方案总结
问题背景 项目架构为前后端分离的微服务架构: 前端部署在 8000 端口API 网关部署在 9000 端口后端服务包括: api-backend (9001端口)api-interface (9002端口) 初始状态: 前端已配置 HTTPS(端口 8000)后端服务未配…...
PHP反序列化
一、PHP面向对象的基础知识 基本概念 1、面向过程VS面向对象 以做饭为例,面向过程是自己从原材料到成品全部自己做,面向对象相当于去饭店,点菜,等待结果(上菜)。 2、类的定义 类是定义了一件事物的抽象…...
6、原来可以这样理解C语言_函数(7/8)嵌套调⽤和链式访问
目录 七、嵌套调⽤和链式访问 七、(1)、嵌套调⽤ 七、(2)、链式访问 七、嵌套调⽤和链式访问 七、(1)、嵌套调⽤ 嵌套调⽤就是函数之间的互相调⽤,每个函数就⾏⼀个乐⾼零件,正是因…...
安装 Jenkins 后无法访问用户名或密码且忘记这些凭证怎么办?
Jenkins 是一款功能强大的自动化服务器,在持续集成与交付(CI/CD)领域应用广泛。不过,用户在使用过程中,尤其是首次接触该系统或系统重启后,常常会遇到登录方面的问题。要是 Jenkins 突然要求输入用户名和密…...
VIVADO FIFO (同步和异步) IP 核详细使用配置步骤
VIVADO FIFO (同步和异步) IP 核详细使用配置步骤 目录 前言 一、同步FIFO的使用 1、配置 2、仿真 二、异步FIFO的使用 1、配置 2、仿真 前言 在系统设计中,利用FIFO(first in first out)进行数据处理是再普遍不过的应用了,…...
49_Lua调试
Lua提供了debug库用于创建自定义调试器,尽管Lua本身没有内置的调试器1。这个库允许开发者在程序运行时检查和控制执行流程,这对于开发过程中的错误查找和修复非常有用。 1.Debug库概述 debug库提供的函数可以分为两类:自省函数(introspection functions)和钩子函数(hoo…...