当前位置: 首页 > news >正文

【webpack】技巧使用

webpack和TypeScript

      • 安装webpack相关内容
      • 安装TS相关内容
      • 配置初始化数据
      • 初始化运行展示和目录展示
          • 报错解决(缺失文件配置)
      • 安装前端必备神奇lodash测试一下
      • entry配置
      • index.html模板配置
          • 修改打包出来的index.html的title
          • inject注入
          • chunks 属性
          • 多页面配置
      • Tree Shaking-(摇晃无用代码)
          • sideEffects属性
      • 渐进式网络应用程序PWA
          • PWA
      • Shimming预置全局变量
      • 细粒度Shimming-转换this的指向
      • 全局Exports

安装webpack相关内容

  • npm init -y,自动建立package.json
  • npm install webpack webpack-cli npm install webpack-dev-server html-webpack-plugin -D

安装TS相关内容

  • npm i typescript ts-loader -D

配置初始化数据

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'development',entry: './src/app.ts',module: {rules: [{test: /\.ts$/,use: 'ts-loader',exclude: /node_modules/,},],},resolve: {extensions: ['.ts', '.js'],},output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},plugins: [new HtmlWebpackPlugin()],
};

初始化运行展示和目录展示

  • npx webpack
    在这里插入图片描述
报错解决(缺失文件配置)
  • npx tsc --init
  • 自动创建tsconfig.json
  • 配置一下:
  • 在这里插入图片描述
    在这里插入图片描述
  • 到此,执行npx webpack 即可打包成功
    在这里插入图片描述

安装前端必备神奇lodash测试一下

  • npm i lodash -D
  • 当你使用相关包,包类型报错的时候
  • 原因:缺少ts 相关类型文件
  • ts相关类型文件搜索查看引用命令 在这里插入图片描述
  • npm install --save-dev @types/lodash
    在这里插入图片描述

entry配置

  • 当入口文件不止一个的时候,想多个文件打在一个里面的时候
    在这里插入图片描述
  • 当想单独打成文件的时候
  • 缺点:这个做法相当于lodash自己打一遍,但ap.ts里有使用会再打一遍,最终main.js体积也会变大
    在这里插入图片描述
  • 抽离一下lodash
  • 目的:使main.js体积变小
    在这里插入图片描述

index.html模板配置

  • 没有配置的时候打包出来的index.html
    在这里插入图片描述
  • 配置一下
  • 新建index.html
    在这里插入图片描述
  • 导入模块
    在这里插入图片描述
修改打包出来的index.html的title
  • 步骤一,将index.html中改为
  • webpack内置的属性获取标题
    在这里插入图片描述
<title><%=htmlWebpackPlugin.options.title %>
</title>
  • 步骤2;
    在这里插入图片描述
  • 成果展示
    在这里插入图片描述
inject注入
chunks 属性
  • 没配置前,默认全部

  • 有几个入口,引用几个
    在这里插入图片描述

  • 配置图
    在这里插入图片描述

  • 配置后,只留下配置的
    在这里插入图片描述

多页面配置
  • 注意点:多页面配置filename属性要有,且不同
  • filename如果配置成:“/sh_pc/index.html”,打出的包会在文件夹sh_pc下
plugins: [new HtmlWebpackPlugin({title: '乞力马扎罗',template: './index.html',inject: 'body', // 可以表示这个注入到哪个层filename: 'index.html',chunks: ['main'], //可以配置打包出来的index.html只能引入哪个publicPath: 'http://lochost:8080/', // 可以配置打包出来的index.html的路径}),new HtmlWebpackPlugin({title: '罗马迪克',template: './index2.html',inject: 'body', // 可以表示这个注入到哪个层filename: 'index2.html',chunks: ['lodash'], //可以配置打包出来的index.html只能引入哪个publicPath: 'http://lochost:8081/', // 可以配置打包出来的index.html的路径}),],
  • 优化后:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'development',entry: {main: {import: ['./src/app.ts', './src/app2.ts'],dependOn: 'lodash',},lodash: {import: 'lodash',},},module: {rules: [{test: /\.ts$/,use: 'ts-loader',exclude: /node_modules/,},],},resolve: {extensions: ['.ts', '.js'],},plugins: [new HtmlWebpackPlugin({title: '乞力马扎罗',template: './index.html',inject: 'body', // 可以表示这个注入到哪个层filename: 'sh_pc/index.html',chunks: ['main'], //可以配置打包出来的index.html只能引入哪个publicPath: 'http://lochost:8080/', // 可以配置打包出来的index.html的路径}),new HtmlWebpackPlugin({title: '罗马迪克',template: './index2.html',inject: 'body', // 可以表示这个注入到哪个层filename: 'sh_oc/index2.html',chunks: ['lodash'], //可以配置打包出来的index.html只能引入哪个publicPath: 'http://lochost:8081/', // 可以配置打包出来的index.html的路径}),],output: {clean: true,},
};

Tree Shaking-(摇晃无用代码)

  • Tree-shaking的本质是消除无用的js代码

  • 用到啥才会打包啥
    在这里插入图片描述

  • 看一下区别:
    在这里插入图片描述
    在这里插入图片描述

  • 虽然引入了lodash,但未使用,所以打出来的包里面的lodash被摇晃掉了
    在这里插入图片描述

在这里插入图片描述

sideEffects属性
  • 在package.json中进行配置,即匹配到的任何css文件都不进行Tree Shaking

在这里插入图片描述

渐进式网络应用程序PWA

  • 非离线状态运行
  • 借助第三方包
  • npm i http-server -D
  • 配置一下运行脚本
  • npm start
    在这里插入图片描述
    -当他成功启动后,页面展示, 但当你把服务器挂掉,页面就不展示
    在这里插入图片描述
  • 一般来说,启动服务是不会更新包里面的内容,如果你想更新内容
    在这里插入图片描述
PWA
  • 离线状态运行
  • 先安装
  • npm i workbox-webpack-plugin -D
  • 再配置在这里插入图片描述
  • 再运行在这里插入图片描述
  • 页面上监听一下游览器是否支持离线运行
  • 想要清除这个离线状态
  • 访问chrome://serviceworker-internals/上点一下Unrefister即可
console.log('乞力马扎罗');
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then((registration) => {console.log('service-worker registed');}).catch((error) => {console.log('service-worker registed error');});});
}
  • npm start
    在这里插入图片描述

Shimming预置全局变量

  • 旧代码
    在这里插入图片描述
  • 新项目
  • 本来会报错,但通过预置全局变量配置了就不会
  • 配置完,lodash就是全局的了在这里插入图片描述
  • 这样配置即可在这里插入图片描述

细粒度Shimming-转换this的指向

  • 有些模块的this指向window对象
  • 但实际我们的CommonJS项目中this指向指向的实际位置不是
  • 解决方法:
  • 通过使用imports-loader覆盖this指向
  • 目前问题:
    在这里插入图片描述

在这里插入图片描述

  • 解决步骤一:
  • npm i imports-loader
  • 步骤二:配置
    在这里插入图片描述

全局Exports

  • 第三方模块,你不清楚他是如何导出的
  • 故你想使用,但不想导入,想直接使用里面的方法
  • 步骤一
  • npm i exports-loader -D
  • 步骤二
  • 新建要导入的文件gloabls.js
const file = '公共的';const helpers = {parse() {console.log('方法');},
};
  • 步骤三
  • webpack.config.js里面配置
    在这里插入图片描述
  • 步骤四 页面中使用
    在这里插入图片描述
    在这里插入图片描述

相关文章:

【webpack】技巧使用

webpack和TypeScript 安装webpack相关内容安装TS相关内容配置初始化数据初始化运行展示和目录展示报错解决&#xff08;缺失文件配置&#xff09; 安装前端必备神奇lodash测试一下entry配置index.html模板配置修改打包出来的index.html的titleinject注入chunks 属性多页面配置 …...

windows 谷歌浏览器Chrome 怎么禁止更新

1.首先把任务管理器里的谷歌浏览器程序结束&#xff1a; &#xff08;鼠标在任务栏右击&#xff0c;出现任务管理器&#xff09; 2.windowr&#xff0c;输入services.msc 带有Google Update的服务&#xff0c;选择禁用。 3.windowr&#xff0c;输入taskschd.msc 任务计划程序…...

力扣(leetcode)第349题两个数组的交集(Python)

349.两个数组的交集 题目链接&#xff1a;349.两个数组的交集 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出…...

python Flask 写一个简易的 web 端程序(附demo)

python Flask 写一个简易的 web 端程序 &#xff08;附demo&#xff09; 介绍简单介绍装饰器 app.route("/") 进阶增加接口设置端口 静态网页核心代码完整代码 介绍 Flask 是一个用于构建 Web 应用程序的轻量级 Python Web 框架。它设计简单、易于学习和使用&#x…...

mysql问题

面试官&#xff1a;MySQL中&#xff0c;如何定位慢查询? 候选人&#xff1a; 嗯~&#xff0c;我们当时做压测的时候有的接口非常的慢&#xff0c;接口的响应时间超过了2秒以上&#xff0c;因为我们当时的系统部署了运维的监控系统Skywalking &#xff0c;在展示的报表中可以看…...

iframe通信,window.postMessage父子项目数据通信

父 > 子 父项目 <iframe:src"cockpitUrl"id"cockpitIframe"load"handleLoad" ></iframe>// 向子系统传递数据&#xff08;注意要再iframe的load中注册&#xff0c;保证iframe已经加载完成&#xff0c;这样子项目才能监听到&…...

ES6中新增Array.from()函数的用法详解

目录 Map对象的转换 Set对象的转换 字符串的转换 类数组对象的转换 Array.from可以接受三个参数 ES6为Array增加了from函数用来将其他对象转换成数组。当然&#xff0c;其他对象也是有要求&#xff0c;也不是所有的&#xff0c;可以将两种对象转换成数组。 1、部署了Iter…...

Camera2+OpenGL ES+MediaCodec+AudioRecord实现录制音视频写入H264 SEI数据

记录一下学习过程&#xff0c;得到一个需求是基于Camera2OpenGL ESMediaCodecAudioRecord实现录制音视频。 需求&#xff1a; 在每一帧视频数据中&#xff0c;写入SEI额外数据&#xff0c;方便后期解码时获得每一帧中的自定义数据。点击录制功能后&#xff0c;录制的是前N秒至…...

C语言笔试题之反转链表(头插法)

实例要求&#xff1a; 1、给定单链表的头节点 head &#xff1b;2、请反转链表&#xff1b;3、最后返回反转后的链表&#xff1b; 案例展示&#xff1a; 实例分析&#xff1a; 1、入参合理性检查&#xff0c;即head ! NULL || head->next ! NULL&#xff1b;2、while循环…...

WEB3:互联网发展的新时代

随着科技的飞速发展&#xff0c;互联网已从最初的信息交流平台发展为涵盖了工作、生活、娱乐、教育等众多领域的复杂系统。我们将其称之为“WEB3”&#xff0c;这个名称是对互联网新时代的高度概括&#xff0c;标志着我们已经迈入了WEB3时代。 在WEB3时代&#xff0c;互联网将…...

c语言:贪吃蛇的实现

目录 贪吃蛇实现的技术前提&#xff1a; Win32 API介绍 控制台程序&#xff08;console&#xff09; 控制台屏幕上的坐标 GetStdHandle GetConsoleCursorInfo CONSOLE_CURSOR_INFO SetConsoleCursorInfo SetConsoleCursorPosition GetAsyncKeyState 宽字符的打印 …...

第5课 使用FFmpeg将rtmp流再转推到rtmp服务器

本课对应源文件下载链接&#xff1a; https://download.csdn.net/download/XiBuQiuChong/88801992 通过前面的学习&#xff0c;我们已经可以正常播放网络rtmp流及本地mp4文件。这节课&#xff0c;我们将在前面的基础上实现一个常用的转推功能&#xff1a;读取rtmp流或mp4文件并…...

Vue中v-if和v-show区别

Vue中v-if和v-show是两个常用的指令&#xff0c;用于控制元素的显示和隐藏。虽然它们都能达到相同的效果&#xff0c;但在实现机制和使用场景上有一些区别。本文将详细介绍v-if和v-show的区别&#xff0c;并且通过示例代码来演示它们的使用。 首先&#xff0c;让我们来看一下v…...

LabVIEW与EtherCAT实现风洞安全联锁及状态监测

LabVIEW与EtherCAT实现风洞安全联锁及状态监测 在现代风洞试验中&#xff0c;安全联锁与状态监测系统发挥着至关重要的作用&#xff0c;确保了试验过程的安全性与高效性。介绍了一套基于EtherCAT总线技术和LabVIEW软件开发的风洞安全联锁及状态监测系统。该系统通过实时、可靠…...

PostgreSQL的wal文件回收问题

引子 将PostgreSQL的GUC参数wal_recycle设置为on&#xff0c;然后对数据库执行一定业务量的操作&#xff0c;会发现在pg_wal目录下&#xff0c;有很多未来使用的wal文件&#xff0c;且创建时间比现在正在使用的wal文件更早&#xff0c;下文将描述和分析这种情况。 问题描述 …...

java-JUC并发编程学习笔记05(尚硅谷)

我们写一段测试代码: 会出现线程不安全的问题。 使用Vector解决线程不安全问题&#xff1a; 但是这个类几乎不会被使用了&#xff0c;因为效率太低。 方法二&#xff1a;通过Collections解决&#xff1a; 但是这种方案实际中也不太会使用。 我们还有第三种方法使用CopyOnWri…...

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…...

网络原理TCP/IP(1)

文章目录 端口号UDP协议 在网络通信中&#xff0c;协议非常重要 协议进行了分层 应用层就是对应着应用程序&#xff0c;是程序员打交道最多的这一层&#xff0c;调用系统提供的网络api写出来的代码都是属于应用层的 应用层有很多现成的协议&#xff0c;但是更多的还是程序员需要…...

EasyExcel使用,实体导入导出

简介 Java解析、生成Excel比较有名的框架有Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存&#xff0c;poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题&#xff0c;但POI还是有一些缺陷&#xff0c;比如07版Excel解压缩以及解压后存储都是在内存中…...

让IIS支持SSE (Server Sent Events)

本文只探讨IISPython网站的情况&#xff0c;对于asp.net也应该不用这么麻烦。 先上结论&#xff1a;用反向代理&#xff1a; IIS URL Rewrite waitress Waitress是一个纯python编写独立的WSGI服务器&#xff0c;功能比Gunicorn弱一些&#xff0c;但可以运行在windows平台上&…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...