TypeScript学习日志-第二十四天(webpack构建ts+vue3)

webpack构建ts+vue3

一、构建项目目录

如图:

shim.d.ts 这个文件用于让ts识别.vue后缀的 后续会说 

并且给 tsconfig.json 增加配置项

  "include": ["src/**/*"]

二、基础构建

安装依赖

安装如下依赖:

npm install webpack -D
npm install webpack-dev-server -D
npm install webpack-cli -D

修改 package.json 的启动服务和打包命名

{"scripts": {"build": "webpack","dev": "webpack-dev-server"}
}

编写 webpakc.config.js 配置文件

const {Configuration} = require('webpack')
const path = require('node:path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')
const CssExtractPlugin = require('mini-css-extract-plugin')
/*** @type {Configuration}*/
const config = {mode:'development',entry:'./src/main.ts', // 入口文件output:{path:path.resolve(__dirname,'dist'), //生成目录filename:'[chunkhash].js' ,//打包之后的文件clean:true //清空打包的结果},stats:'errors-only',plugins:[new HtmlWebpackPlugin({template:'./index.html'}),new VueLoaderPlugin(),new CssExtractPlugin()], //webpack的插件都是class 都需要newmodule:{rules:[{test:/\.ts$/,use:{loader:'ts-loader', // 处理ts文件options:{appendTsSuffixTo:[/\.vue$/]}}},{test:/\.vue$/,use:'vue-loader',},{test:/\.css$/,use:[CssExtractPlugin.loader,'css-loader'], //从右向左解析},{test:/\.less$/,use:[CssExtractPlugin.loader,'css-loader','less-loader'], //从右向左解析}]},optimization:{splitChunks:{cacheGroups:{moment:{name:'moment',chunks:'all',test:/[\\/]node_modules[\\/]moment[\\/]/},common:{name:'common',chunks:'all',minChunks:2 //它的引用次数大于2个就会被分割出来}}}}
}module.exports = config

这时候就能正常使用了

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

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

相关文章

Vue简介

Vue.js 是一款流行的 JavaScript 前端框架,用于构建用户界面和单页面应用程序(SPA)。它的核心库专注于视图层的渲染,同时也提供了诸如路由(VueRouter)、状态管理(Vuex,Pinia)等功能的插件,使得开发复杂的交互式应用变得…

ACC-UNet: A Completely Convolutional UNet Model for the 2020s

文章目录 ACC-UNet: A Completely Convolutional UNet Model for the 2020s摘要方法实验结果 ACC-UNet: A Completely Convolutional UNet Model for the 2020s 摘要 这十年以来,计算机视觉领域引入了 Vision Transformer,标志着广泛的计算机视觉发生了…

基于SpringBoot+Vue社区老人健康信息管理系统

摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统社区老人健康信息管理系统信息管理难度大,容错…

Linux上的监控工具:Zabbix、Prometheus、APM和ELK

2024年5月12日,周日上午 在Linux上有很多监控工具,比如Zabbix、Prometheus、APM和ELK 监控工具是确保系统稳定运行的关键组件之一,它可以帮助系统管理员和开发人员及时发现并解决问题。 以下是几种流行的监控工具的简要介绍: Z…

JETBRAINS IDES 分享一个2099通用试用码!IDEA 2024 版 ,支持一键升级

文章目录 废话不多说上教程:(动画教程 图文教程)一、动画教程激活 与 升级(至最新版本) 二、图文教程 (推荐)Stage 1.下载安装 toolbox-app(全家桶管理工具)Stage 2 : 下…

vs2019 STL库里 判断函数类型的模板 is_function_v 与 is_const_v

(1)源代码如下: 经简单代码测试后,得出 vs2019 的 c 编译器 和 其 STL 库的观点与设计:is_const_v 用来判断类型 T 内是否含有 const 修饰符,含有 const 则返回真。但若 T 是含有 const 的引用类型&#xf…

链表与顺序表的比较

目录 1.链表与顺序表的区别 1.1 存储空间 1.2 插入删除 1.3 扩容 1.4 使用场景 1.5 缓存使用率 1.链表与顺序表的区别 1.1 存储空间 顺序表在物理上与逻辑上都是连续的 链表在逻辑上连续物理不一定连续 因此顺序表我们可以任意访问而链表不可以随机访问 链表每次访问都…

什么是XXE漏洞,日常如何做好web安全,避免漏洞威胁

随着网络技术的不断发展,网站安全问题日益受到人们的关注。当前随着技术发展,网站存在一些常见的可能被攻击者利用的漏洞,而在众多网站安全漏洞中,XXE(XML External Entity)漏洞是一个不容忽视的问题。今天…

Sass深度解析:性能优化的秘密

首先,这篇文章是基于笔尖AI写作进行文章创作的,喜欢的宝子,也可以去体验下,解放双手,上班直接摸鱼~ 按照惯例,先介绍下这款笔尖AI写作,宝子也可以直接下滑跳过看正文~ 笔尖Ai写作:…

Mysql数据库的基础学习

为什么使用数据库? 1.持久化:将数据保存到可掉电式存储设备中以供使用。 数据库相关概念: DB:数据库(Databass)即存储数据的仓库,本质是一个文件系统,保存了一系列有组织的数据DBMS:数据库管…

MongoDB 数据精简指南:删除文档操作详解

在 MongoDB 数据库管理中,删除文档是一项至关重要的任务,它不仅可以帮助您清理数据库,释放存储空间,还可以保持数据的整洁性和一致性。然而,删除操作需要谨慎对待,因为一旦执行,数据将永久丢失。…

C语言如何为联合体变量赋初值?

一、问题 联合体又称之为共⽤体,声明⼀个共⽤体类型,必然要定义⼀个共⽤体类型的变量, 并对其赋初值。那么,如何为共⽤体变量赋初值呢? 二、解答 1. 联合体类型定义变量 定义联合体类型变量的⽅法与定义结构体类型变…

Java面试题:讨论Java中继承的使用场景和限制,以及如何通过组合来替代继承

在Java中,继承是一种强大的编程机制,它允许一个类(称为子类或派生类)继承另一个类(称为父类或基类)的属性和方法。继承可以带来代码复用和构建分层结构的好处,但也存在一些限制和潜在的问题。 …

netstat命令详解

netstat网络连接分析工具 工具说明: netstat 是一款命令行工具,主要是用于列出系统上所有的网络套接字连接情况,包括 tcp, udp 以及 unix 套接字,另外它还能列出处于监听状态(即等待接入请求)的套接字。除…

C#识别图片数字

///选取图片按钮的代码/// </summary>/// <param name"sender"></param>/// <param name"e"></param>private void 选择图片_Click(object sender, EventArgs e){ OpenFileDialog openFileDialog new OpenFileDialog(…

Python进阶之-反射机制详解

✨前言&#xff1a; 什么是反射&#xff1f; Python中的“反射”是一个编程术语&#xff0c;它指的是程序在运行时能够检查和操作其自身状态的能力&#xff0c;特别是通过名称&#xff08;通常是字符串&#xff09;来访问对象的属性、方法和其他组成部分。这种机制允许代码动态…

基于SpringBoot+Vue的法律咨询系统

课题背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域位置往往是人们思想上不可跨域的鸿沟&#xff0c;信息的传播速度极慢&#xff0c;信息处理的速…

【算法-程序的灵魂#谭浩强配套】(适合专升本、考研)

无偿分享学习资料&#xff0c;需要的小伙伴评论区或私信dd。。。 无偿分享学习资料&#xff0c;需要的小伙伴评论区或私信dd。。。 无偿分享学习资料&#xff0c;需要的小伙伴评论区或私信dd。。。 完整资料如下&#xff1a; 1.一个程序主要包括以下两方面信息&#xff1a;程…

JAVA学习-练习试用Java实现分隔链表

问题&#xff1a; 给定一个链表的头节点 head 和一个特定值 x &#xff0c;请对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前&#xff0c;应当 保留 两个分区中每个节点的初始相对位置。 示例 1&#xff1a; 输入&#xff1a;head [1,…

Pikachu 靶场 RCE 通关解析

前言 Pikachu靶场是一种常见的网络安全训练平台&#xff0c;用于模拟真实世界中的网络攻击和防御场景。它提供了一系列的实验室环境&#xff0c;供安全专业人士、学生和爱好者练习和测试他们的技能。 Pikachu靶场的目的是帮助用户了解和掌握网络攻击的原理和技术&#xff0c;…