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

第二十章 TypeScript（webpack构建ts+vue3项目）

news 2026/2/7 13:03:34

构建项目目录

src
-- main.ts
-- App.vue
--shim.d.ts
webpack.config.js
index.html
package.json
tsconfig.json

基础构建

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

package.json 添加打包命令和启动服务的命令

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

编写webpack.config.js 配置文件测试打包

const { Configuration } = require('webpack')
const path  = require('path')
/*** @type {Configuration}*/
const config = {mode:"development", //开发模式entry:'./src/main.ts', //入口output:{path: path.resolve(__dirname, 'dist'), //出口目录filename: 'main.js', //出口文件}
}module.exports = config

tsconfig.json 增加配置项

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

运行npm run build 打包成功

支持TypeScript

增加依赖

npm install ts-loader -D
npm install typescript -D

const { Configuration } = require('webpack')
const path = require('path')
/*** @type {Configuration}*/
const config = {mode: "development",entry: './src/main.ts',output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js',},module: {rules: [{test: /\.ts$/,use: 'ts-loader' //支持解析ts文件}]}
}module.exports = config

支持vue

安装依赖

npm install vue-laoder -D
npm install html-webpack-plugin -D

main.ts 引入Vue

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

让ts识别.vue后缀

declare module "*.vue" {import { DefineComponent } from "vue"const component: DefineComponent<{}, {}, any>export default component
}

初始化index.html 模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div>
</body>
</html>

增加vue-loader 和插件

const { Configuration } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWepackPlugin = require('html-webpack-plugin')
const path = require('path')
/*** @type {Configuration}*/
const config = {mode: "development",entry: './src/main.ts',output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js',},stats: 'errors-only',plugins: [new VueLoaderPlugin(),new HtmlWepackPlugin({template: './index.html'})],module: {rules: [{test: /\.ts$/,use:{loader: 'ts-loader',options:{appendTsSuffixTo: [/\.vue$/]}}},{test: /\.vue$/,use: 'vue-loader'}]}
}module.exports = config

支持css + less

安装依赖

npm install css-loader style-loader less less-loader -D

const { Configuration } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWepackPlugin = require('html-webpack-plugin')
const path = require('path')
/*** @type {Configuration}*/
const config = {mode: "development",entry: './src/main.ts',output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js',},stats: 'errors-only',plugins: [new VueLoaderPlugin(),new HtmlWepackPlugin({template: './index.html'})],module: {rules: [{test: /\.ts$/,use:{loader: 'ts-loader',options:{appendTsSuffixTo: [/\.vue$/]}}},{test: /\.vue$/,use: 'vue-loader'},{test: /\.css$/,use: ['style-loader', 'css-loader'] //从右向左解析},{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}]}
}module.exports = config

代码分包

性能优化默认把所有代码打包到一个js文件体积太大了我们可以进行代码分包减少体积

const { Configuration } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWepackPlugin = require('html-webpack-plugin')
const path = require('path')
/*** @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 VueLoaderPlugin(),new HtmlWepackPlugin({template: './index.html'})],optimization: {splitChunks: {cacheGroups: {moment: {name: "moment",test: /[\\/]node_modules[\\/]moment[\\/]/,chunks: "all"},common:{name: "common",chunks: "all",minChunks: 2}}}},module: {rules: [{test: /\.ts$/,use: {loader: 'ts-loader',options: {appendTsSuffixTo: [/\.vue$/]}}},{test: /\.vue$/,use: 'vue-loader'},{test: /\.css$/,use: ['style-loader', 'css-loader'] //从右向左解析},{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}]}
}module.exports = config

单独提取css

目前是通过js动态插入style标签的方式进行的，但是我们希望通过link标签引入

安装依赖

npm install mini-css-extract-plugin -D

const { Configuration } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWepackPlugin = require('html-webpack-plugin')
const MimiCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
/*** @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 VueLoaderPlugin(),new HtmlWepackPlugin({template: './index.html'}),new MimiCssExtractPlugin()],optimization: {splitChunks: {cacheGroups: {moment: {name: "moment",test: /[\\/]node_modules[\\/]moment[\\/]/,chunks: "all"},common:{name: "common",chunks: "all",minChunks: 2}}}},module: {rules: [{test: /\.ts$/,use: {loader: 'ts-loader',options: {appendTsSuffixTo: [/\.vue$/]}}},{test: /\.vue$/,use: 'vue-loader'},{test: /\.css$/,use: [MimiCssExtractPlugin.loader, 'css-loader'] //从右向左解析},{test: /\.less$/,use: [MimiCssExtractPlugin.loader, 'css-loader', 'less-loader']}]}
}module.exports = config

第二十章 TypeScript（webpack构建ts+vue3项目）

构建项目目录 src-- main.ts-- App.vue--shim.d.tswebpack.config.jsindex.htmlpackage.jsontsconfig.json 基础构建 npm install webpack -D npm install webpack-dev-server -D npm install webpack-cli -D package.json 添加打包命令和启动服务的命令 {"scripts…...

编程日记 2024/3/25 17:25:47

白酒：陈酿过程中的老熟度评价与品质提升方法

在豪迈白酒的酿造过程中，陈酿是一个至关重要的环节。陈酿不仅能使白酒老熟，提品质，还能发展出与众不同的风味和口感。云仓酒庄深知陈酿的重要性，并进行了深入的研究和实践。本文将探讨陈酿过程中的老熟度评价与品质提升方法。首先…...

编程日记 2024/3/25 17:23:44

BoostSeacher

前言： 基于Boost库的搜索引擎为何基于Boost库？ 从技术上说：这个项目用了很多Boost库的接口从搜索引擎存储内说：存储的内容是Boost库的内容预期效果预期效果:用户在浏览器输入关键词，浏览器显示相关结果 STEP1&#x…...

编程日记 2024/3/25 17:16:36

我的算法刷题笔记（3.18-3.22）

我的算法刷题笔记（3.18-3.22） 1. 螺旋矩阵1. total是总共走的步数2. int[][] directions {{0, 1}, {1, 0}, {0, -1}, {-1, 0}};方位3. visited[row][column] true;用于判断是否走完一圈 2. 生命游戏1. 使用额外的状态22. 再复制一份数组 3. 旋转图像观…...

编程日记 2024/3/25 17:07:26

初探Ruby编程语言

文章目录引言一、Ruby简史二、Ruby特性三、安装Ruby四、命令行执行Ruby五、Ruby的编程模型六、案例演示结语引言大家好，今天我们将一起探索一门历史悠久、充满魅力的编程语言——Ruby。Ruby是由松本行弘（Yukihiro Matsumoto）于1993年发明…...

编程日记 2024/3/25 17:05:24

深圳MES系统如何提高生产效率

深圳MES系统可以通过多种方式提高生产效率，具体如下： 实时监控和分析：MES系统可以实时收集并分析生产数据，帮助企业及时了解生产状况，发现问题并迅速解决，避免问题扩大化。这种实时监控和分析功能可以显著…...

编程日记 2024/3/25 17:03:22

QT常见Layout布局器使用

布局简介为什么要布局？通过布局拖动不影响鼠标拖动窗口的效果等优点.QT设计器布局比较固定，不方便后期修改和维护；在Qt里面布局分为四个大类 ： 盒子布局：QBoxLayout 网格布局：QGridLayout 表单布局&am…...

编程日记 2024/3/25 16:59:18

Elasticsearch8 - Docker安装Elasticsearch8.12.2

前言最近在学习 ES，所以需要在服务器上装一个单节点的 ES 服务器环境：centos 7.9 安装下载镜像目前最新版本是 8.12.2 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.12.2创建配置新增配置文件 elasticsearch.yml http.host…...

编程日记 2024/3/25 16:58:16

还在为不知道怎么学习网络安全而烦恼吗？这篇文带你从入门级开始学习网络安全—认识网络安全

随着网络安全被列为国家安全战略的一部分，这个曾经细分的领域发展提速了不少，除了一些传统安全厂商以外，一些互联网大厂也都纷纷加码了在这一块的投入，随之而来的吸引了越来越多的新鲜血液不断涌入。不同于Java、C/C等后端开发岗…...

编程日记 2024/3/25 16:57:15

DFS基础——迷宫

迷宫配套视频讲解关于dfs和bfs的区别讲解。对于上图，假设我们要找从1到5的最短路，那么我们用dfs去找，并且按照编号从大到小的顺序去找，首先找到的路径如下， 从节点1出发，我们发现节点2可以走&#xff…...

编程日记 2024/3/25 16:55:13

iOS开发进阶（九）：OC混合开发嵌套H5应用并互相通信

文章目录一、前言二、嵌套H5应用并实现双方通信2.1 WKWebView 与JS 原生交互2.1.1 H5页面嵌套2.1.2 常用代理方法2.1.3 OC调用JS方法2.1.4 JS调用OC方法 2.2 JSCore 实现原生与H5交互2.2.1 OC调用H5方法并传参2.2.2 H5给OC传参 2.3 UIWebView的基本用法2.3.1 H5页面嵌套2.3.2 …...

编程日记 2024/3/25 16:54:11

新人应该从哪几个方面掌握大数据测试？

什么是大数据大数据是指无法在一定时间范围内用传统的计算机技术进行处理的海量数据集。对于大数据的测试则需要不同的工具、技术、框架来进行处理。大数据的体量大、多样化和高速处理所涉及的数据生成、存储、检索和分析使得大数据工程师需要掌握极其高的技术功底。需要你…...

编程日记 2024/3/25 16:53:10

linux debian运行pip报错ssl tsl module in Python is not available

写在前面 ① 在debian 8上升级了Python 3.8.5 ② 升级了openssl 1.1.1 问题描述在运行pip命令时提示如下错误 pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.尝试了大神推荐的用如下方法重新编译安装python，发…...

编程日记 2024/3/25 16:52:08

宝塔设置限制ip后，ip改了之后，登陆不上了

前言今天作死，在宝塔面板设置界面，将访问面板的ip地址限制成只有自己电脑的ip才能访问，修改之后直接人傻了，“403 forbidden”。吓得我直接网上一通搜索，还好，解决方法非常简单。解决方法打开ssh客户…...

编程日记 2024/3/25 16:51:07

解锁新功能，Dynadot现支持BITPAY平台虚拟货币

Dynadot现已支持虚拟货币付款！借助与BitPay平台的合作，Dynadot为您提供了多种安全的虚拟货币选择。我们深知每位客户都有自己偏好的支付方式，因此我们努力扩大了支付方式范围。如果您对这一新的支付方式感兴趣，在结账时您可以尝试…...

编程日记 2024/3/25 16:47:02

Android下的Touch事件分发详解

文章目录一、事件传递路径二、触摸事件的三个关键方法2.1 dispatchTouchEvent(MotionEvent ev)2.2 onInterceptTouchEvent(MotionEvent ev)2.3 onTouchEvent(MotionEvent event) 三、ViewGroup中的dispatchTouchEvent实现四、总结在Android系统中，触摸事件的分发和…...

编程日记 2024/3/25 16:43:57

uniapp的配置文件、入口文件、主组件、页面管理部分

pages.json 配置文件，全局页面路径配置，应用的状态栏、导航条、标题、窗口背景色设置等 main.js 入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pag…...

编程日记 2024/3/25 16:42:56

B端设计：如何让UI组件库成为助力，而不是阻力。

首发2023-09-24 15:42贝格前端工场 Hi，我是大千UI工场，网上的UI组件库琳琅满目，比如elementUI、antdesign、iview等等，甚至很多前端框架，也出了很多UI组件，如若依、Layui、bootstrap等等，作为U…...

编程日记 2024/3/25 16:41:55

敏捷开发最佳实践：学习与改进维度实践案例之会诊式培养敏捷教练

自组织团队能够定期反思并采取针对性行动来提升人效，但2022年的敏捷调研发现，70%的中国企业在学习和改进方面仍停留在团队级。本节实践案例将分享“会诊式培养敏捷教练”的具体做法，突出了敏捷以人为本的学习和改进，强调了通过人员…...

编程日记 2024/3/25 16:39:52

C#宿舍信息管理系统

简介功能 1.发布公告 2.地理信息与天气信息的弹窗 3.学生信息的增删改查 4.宿舍信息的增删改查 5.管理员信息的增删改查 6.学生对宿舍物品的报修与核实 7.学生提交请假与销假 8.管理员对保修的审批 9.管理员对请假的审批技术 1.采用C#\Winform开发的C\S系统 2.采用MD5对数据…...

编程日记 2024/3/25 16:38:50

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/1/25 1:05:45

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽，大家好，我是左手python！ Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库，用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

SpringCloudGateway 自定义局部过滤器

场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

SpringTask-03.入门案例

一.入门案例启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等，设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2026/2/1 12:04:40

goreplay

1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具，可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景随着应用程序的增长，测试它所需的工作量也会呈指数级增长。GoRepl…...

编程新知 2026/2/1 6:17:17

【动态规划】B4336 [中山市赛 2023] 永别|普及+

B4336 [中山市赛 2023] 永别题目描述你做了一个梦，梦里有一个字符串，这个字符串无论正着读还是倒着读都是一样的，例如： a b c b a \tt abcba abcba 就符合这个条件。但是你醒来时不记得梦中的字符串是什么，只记得…...

编程新知 2026/2/4 6:13:47

构建项目目录

基础构建

支持TypeScript

支持vue

支持css + less

代码分包

单独提取css

相关文章：