webpack 和 ts 简单配置及使用
如何使用webpack 与 ts结合使用
新建项目 ，执行项目初始化
npm init -y
会生成
{"name": "tsdemo01","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"ts-loader": "^9.4.4","typescript": "^5.1.6","webpack": "^5.88.2","webpack-cli": "^5.1.4"}
}安装依赖 ：
-D 开发依赖 等价于 --save-dev
npm i -D webpack webpack-cli typescript ts-loader
根目录下新建webpack.config.js,webpack的配置文件
// 引入path库 用于拼接路径
const path = require('path')
//webpack 所有配置信息都写在module.exports中
module.exports={// 指定入口文件entry: './src/index.ts',// 指定打包文件所在目录output:{// 指定打包文件的目录path:path.resolve(__dirname,'dist'),//打包后的文件 出口filename:"bundle.js"},// 指定webpack打包时要使用的模块module:{// 指定要加载的规则rules:[{ //test 指定的是规则生效的文件 以ts结尾的文件test:/\.ts$/,// 要使用的loaderuse:'ts-loader',//要排除的文件exclude:/node-modules/ }]}
}
在根目录下 新建tsconfig.json
{"compilerOptions":{"module":"ES2015","target":"ES2015","strict":true}
}
在package.json 的scripts中添加
"build":"webpack"
都配置好后，执行 npm run build
在目录下看到dist文件，就是成功拉！
在项目中，需要在页面中引入js使用，
html-weback-plugin是自动生成html文件，并且自动引入相关资源
npm i -D html-webpack-plugin
配置的webpack.config.js
// 引入path库 用于拼接路径
const path = require('path');
// 引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');//webpack 所有配置信息都写在module.exports中
module.exports = {// 指定入口文件entry: './src/index.ts',// 指定打包文件所在目录output: {// 指定打包文件的目录path: path.resolve(__dirname, 'dist'),//打包后的文件 出口filename: 'bundle.js',},// 指定webpack打包时要使用的模块module: {// 指定要加载的规则rules: [{//test 指定的是规则生效的文件 以ts结尾的文件test: /\.ts$/,// 要使用的loaderuse: 'ts-loader',//要排除的文件exclude: /node-modules/,},],},plugins: [new HTMLWebpackPlugin({title: '我是自定义title',}),],
};再执行 npm run build 时，目录会变更
如果想有个模板，可以在src下新增一个index,html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是模板</title>
</head>
<body><div id="box1">我是模板的div1</div>
</body>
</html>
在webpack.config.js中，把title 换为template
// 引入path库 用于拼接路径
const path = require('path');
// 引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');//webpack 所有配置信息都写在module.exports中
module.exports = {// 指定入口文件entry: './src/index.ts',// 指定打包文件所在目录output: {// 指定打包文件的目录path: path.resolve(__dirname, 'dist'),//打包后的文件 出口filename: 'bundle.js',},// 指定webpack打包时要使用的模块module: {// 指定要加载的规则rules: [{//test 指定的是规则生效的文件 以ts结尾的文件test: /\.ts$/,// 要使用的loaderuse: 'ts-loader',//要排除的文件exclude: /node-modules/,},],},plugins: [new HTMLWebpackPlugin({// title: '我是自定义title',template: './src/index.html',}),],
};执行打包 npm run build 就会出现下图：
可使用webpack-dev-server 对代码进行实时的编译监控
下载：npm i -D webpack-dev-server
在package.json中配置scripts 中新增 “start”: “webpack serve --open”
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack serve --open"},
执行 npm run start
当代码修改，检查到后，页面会实时的进行更新
打包清空上一次内容：可使用 clean-webpack-plugin
写法与html-webpack-plugin相同
webpack.config.js文件：
// 引入path库 用于拼接路径
const path = require('path');
// 引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//webpack 所有配置信息都写在module.exports中
module.exports = {// 指定入口文件entry: './src/index.ts',// 指定打包文件所在目录output: {// 指定打包文件的目录path: path.resolve(__dirname, 'dist'),//打包后的文件 出口filename: 'bundle.js',},// 指定webpack打包时要使用的模块module: {// 指定要加载的规则rules: [{//test 指定的是规则生效的文件 以ts结尾的文件test: /\.ts$/,// 要使用的loaderuse: 'ts-loader',//要排除的文件exclude: /node-modules/,},],},plugins: [new CleanWebpackPlugin(),new HTMLWebpackPlugin({// title: '我是自定义title',template: './src/index.html',}),],// 设置引用模块resolve: {// 以.ts 和.js为结尾的扩展名文件可以做模板使用extensions: ['.ts', '.js'],},
};比如src下另有一个item1.ts
export const hi = '你好';
想在index.ts引入，
import { hi } from './item1';
let a: string;
a = 'aaa';
console.log(a);
function sum(a: number, b: number): number {return a + b;
}
console.log(sum(211, 234));
console.log('hi----', hi);直接引入，打印，在npm run build 时，会报错
解决方法是webpack.config.js配置下
// 设置引用模块resolve: {extensions: ['.ts', '.js'],},
写上这个就可以在ts中引入其他ts文件中的变量
再次打包 npm run build 就不会报错了
就执行成功拉
相关文章：
webpack 和 ts 简单配置及使用
如何使用webpack 与 ts结合使用 新建项目 ，执行项目初始化 npm init -y会生成 {"name": "tsdemo01","version": "1.0.0","description": "","main": "index.js","scripts&…...
MATLAB算法实战应用案例精讲-【图像处理】交并比
目录 交并比 非极大值抑制 Soft NMS Soft NMS 提出背景 Soft NMS 算法流程 Soft NMS 算法示例...
[Machine Learning] decision tree 决策树
（为了节约时间，后面关于机器学习和有关内容哦就是用中文进行书写了，如果有需要的话，我在目前手头项目交工以后，用英文重写一遍） （祝，本文同时用于比赛学习笔记和机器学习基础课程&a…...
【数学建模】-- 数学规划模型
概述： 什么是数学规划？ 数学建模中的数学规划是指利用数学方法和技巧对问题进行数学建模，并通过数学规划模型求解最优解的过程。数学规划是一种数学优化方法，旨在找到使目标函数达到最大值或最小值的变量取值，同时满足…...
SpringBoot使用RabbitMQ自动创建Exchange和Queue
背景 小项目，使用RabbitMQ作为消息队列，发布到不同的新环境时，由于新搭建的MQ中不存在Exchange和Queue，就会出错，还得手动去创建，比较麻烦，于是想在代码中将这些定义好后，自动控制M…...
【设计模式】订单状态流传中的状态机与状态模式
文章目录 1. 前言2.状态模式2.1.订单状态流转案例2.1.1.状态枚举定义2.1.2.状态接口与实现2.1.3.状态机2.1.4.测试 2.2.退款状态的拓展2.2.1.代码拓展2.2.2.测试 2.3.小结 3.总结 1. 前言 状态模式一般是用在对象内部的状态流转场景中，用来实现状态机。 什么是状态…...
用来修改或者添加属性或者属性值)
2.js中attr()用来修改或者添加属性或者属性值
attr()可以用来修改或者添加属性或者属性值 例：<input type"button" class"btn btn-info" id"subbtn" style"font-size:12px" value"我也说一句"/>1.如果想获取input中value的值 $(#subbtn).attr(value);…...
【虫洞攻击检测】使用多层神经网络的移动自组织网络中的虫洞攻击检测研究（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
微分流形学习之一：基本定义
微分流形学习之一：基本定义引入 引言一、微分流形的历史简介二、拓扑空间三、微分流形 引言 本文是作者在学习微分流形的时候的笔记，尽量严格完整，并带有一定理解，绝不是结论的简单罗列。如果读者知道数学分析中的 ϵ − δ \ep…...
[C++]笔记-制作自己的静态库
一.静态库的创建 在项目属性c/c里面,选用无预编译头,创建头文件与cpp文件,需要注意release模式下还是debug模式,在用库时候要与该模式相匹配,库的函数实现是外界无法看到的,最后在要使用的项目里面导入.h文件和.lib文件 二.使用一个循环给二维数组赋值 行数 : 第几个元素 / …...
优酷视频码率、爱奇艺视频码率、B站视频码率、抖音视频码率对比
优酷视频码率、爱奇艺视频码率与YouTube视频码率对比 优酷视频码率： 优酷的视频码率可以根据视频质量、分辨率和内容类型而变化。一般而言，优酷提供了不同的码率选项，包括较低的标清（SD）码率和较高的高清（…...
用pytorch实现google net
GoogleNet（也称为Inception v1）是由Google在2014年提出的一个深度卷积神经网络架构。它在ImageNet Large Scale Visual Recognition Challenge (ILSVRC) 2014比赛中取得了优秀的成绩，并引起了广泛的关注。 GoogleNet的设计目标是构建一个更…...
2023-8-15差分矩阵
题目链接：差分矩阵 #include <iostream>using namespace std;const int N 1010;int n, m, q; int a[N][N], b[N][N];void insert(int x1, int y1, int x2, int y2, int c) {b[x1][y1] c;b[x1][y2 1] - c;b[x2 1][y1] - c;b[x2 1][y2 1] c; }int main…...
物理公式分类
(99 封私信 / 81 条消息) 定义式和决定式有什么区别，怎么区分？ - 知乎 (zhihu.com) 1、首先，定义一个物理符号（物理量）来表征物理世界最直观/最基本的物理现象，例如，长度（米…...
vue实现登录注册
目录 一、登录页面 二、注册页面 三、配置路由 一、登录页面 <template><div class"login_container" style"background-color: rgb(243,243,243);height: 93.68vh;background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.f878c96c4179c501a6…...
SpringBoot复习：（55）在service类中的方法上加上@Transactional注解后，Spring底层是怎么生成代理对象的？
SpringBoot run方法代码如下： 可以看到它会调用refreshContext方法来刷新Spring容器，这个refreshContext方法最终会调用AbstractApplicationContext的refresh方法，代码如下 如上图，refresh方法最终会调用finisheBeanFactoryInit…...
常用的图像校正方法
在数字图像处理中，常用的校正方法包括明场均匀性校正、查找表（LUT）校正和伽玛（Gamma）校正。这些校正方法分别针对不同的图像问题，可以改善图像质量，提升图像的可读性和可分析性。下面是这三种校…...
AWS security 培训笔记
云计算的好处 Amazon S3 (Storage) Amazon EC2 (Compute) 上图aws 的几个支柱：安全是其中一个啦 其中安全有几个方面 IAMdetection基础架构保护数据保护应急响应 关于云供应商的责任 data center 原来长这样 ，据说非常之隐蔽的 如果有天退役了…...
设计模式之代理模式（Proxy）的C++实现
1、代理模式的提出 在组件的开发过程中，有些对象由于某种原因（比如对象创建的开销很大，或者对象的一些操作需要做安全控制，或者需要进程外的访问等），会使Client使用者在操作这类对象时可能会存在问题&…...
vim 配置环境变量与 JDK 编译器异常
vim 配置环境变量 使用 vim 打开系统中的配置信息（不存在将会创建）： vim ~/.bash_profile 以配置两个版本 JDK 为例（前提是已安装 JDK）,使用上述命令打开配置信息： 输入法调成英文，输入 i&…...
文墨共鸣大模型长期记忆（LSTM）优化对话体验：实现多轮深度交流
文墨共鸣大模型长期记忆（LSTM）优化对话体验：实现多轮深度交流 你有没有遇到过这样的情况：和一个智能助手聊天，聊到第三四轮的时候，它好像就忘了你最开始说了什么，回答开始跑偏，或者…...
用MNN实现手机端AI绘画：Android Studio集成与模型量化实战
用MNN实现手机端AI绘画：Android Studio集成与模型量化实战 移动端AI应用正在经历爆发式增长，其中AI绘画因其创意性和实用性成为开发者关注的热点。本文将手把手教你如何通过阿里开源的MNN框架，在Android应用中实现高性能的AI绘画功能。不同于…...
别再直接升glibc 2.25了！CentOS7下从2.17平滑升级到2.31的保姆级排雷手册
CentOS7下glibc升级避坑实战：从2.17到2.31的安全跃迁指南 当你在CentOS7服务器上部署最新中间件时，那个熟悉的报错信息又出现了——"GLIBC_2.25 not found"。作为运维老兵，我太了解这种被glibc版本束缚的无力感。但别急着执行yum u…...
Java微服务Istio迁移踩坑实录（17个高频Failure Case全复盘）
第一章：Java微服务Istio 1.20迁移全景认知Istio 1.20 是一个面向生产就绪场景的重要版本，其核心变化聚焦于控制平面简化、xDS 协议增强与 Java 微服务生态的深度协同。该版本正式弃用 Istiod 中的 Pilot、Galley 和 Citadel 组件，统一由 isti…...
Kubernetes Python Client批量管理秘籍：1000+Pod运维实战
Kubernetes Python Client批量管理秘籍：1000Pod运维实战 【免费下载链接】python Official Python client library for kubernetes 项目地址: https://gitcode.com/gh_mirrors/python1/python Kubernetes Python Client是管理Kubernetes集群的官方Python客户…...
指针的使用
指针基本用法C语言中使用指针可以1.程序简洁，紧凑，高效2.有效的表达复杂的数据结构3.动态分配内存4.得到多余一个的函数返回值5.编译或函数调用时为其分配内存单元6.变量是对程序中数据存储空间的抽象指针的感念在C语言中，内存单元的地址&…...
硬件医生养成记：用SMUDebugTool守护AMD Ryzen系统健康
硬件医生养成记：用SMUDebugTool守护AMD Ryzen系统健康 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gi…...
原神抽卡数据分析终极指南：genshin-wish-export完全使用教程
原神抽卡数据分析终极指南：genshin-wish-export完全使用教程 【免费下载链接】genshin-wish-export biuuu/genshin-wish-export - 一个使用Electron制作的原神祈愿记录导出工具，它可以通过读取游戏日志或代理模式获取访问游戏祈愿记录API所需的authKey。…...
基于Go + gin+gorm+ rag+千问大模型 + pgvector 构建市场监管智能问答智能体
基于Go 千问大模型 pgvector构建市场监管智能问答智能体 一、项目背景 随着"放管服"改革的深入推进，市场监管领域政策法规不断更新，企业和公众对政策咨询的需求日益增长。传统的政策咨询模式存在响应慢、效率低、准确性差等问题，…...
零基础玩转OpenClaw：ollama GLM-4-7-Flash镜像入门十步曲
零基础玩转OpenClaw：ollama GLM-4-7-Flash镜像入门十步曲 1. 为什么选择OpenClawGLM-4-7-Flash组合 去年我在整理个人知识库时，每天要花2小时重复处理Markdown文档和截图。直到发现OpenClaw这个能像真人一样操作电脑的开源智能体，配合ollam…...