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

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 时,目录会变更
自动生成html
如果想有个模板,可以在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 就不会报错了
最后结果

就执行成功拉

http://www.lryc.cn/news/129473.html

相关文章:

  • MATLAB算法实战应用案例精讲-【图像处理】交并比
  • [Machine Learning] decision tree 决策树
  • 【数学建模】-- 数学规划模型
  • SpringBoot使用RabbitMQ自动创建Exchange和Queue
  • 【设计模式】订单状态流传中的状态机与状态模式
  • 2.js中attr()用来修改或者添加属性或者属性值
  • 【虫洞攻击检测】使用多层神经网络的移动自组织网络中的虫洞攻击检测研究(Matlab代码实现)
  • 微分流形学习之一:基本定义
  • [C++]笔记-制作自己的静态库
  • 优酷视频码率、爱奇艺视频码率、B站视频码率、抖音视频码率对比
  • 用pytorch实现google net
  • 2023-8-15差分矩阵
  • 物理公式分类
  • vue实现登录注册
  • SpringBoot复习:(55)在service类中的方法上加上@Transactional注解后,Spring底层是怎么生成代理对象的?
  • 常用的图像校正方法
  • AWS security 培训笔记
  • 设计模式之代理模式(Proxy)的C++实现
  • vim 配置环境变量与 JDK 编译器异常
  • TiDB v7.1.0 跨业务系统多租户解决方案
  • 【题解】二叉树中和为某一值的路径(一)
  • css中变量和使用变量和运算
  • 数据结构之线性表的类型运用Linear Lists: 数组,栈,队列,链表
  • 成瘾机制中微生物群的神秘角色
  • arm安装docker与docker-copose
  • 9.文件基本操作
  • 【Java】Spring——Bean对象的作用域和生命周期
  • 数字孪生助力智慧水务:科技创新赋能水资源保护
  • css 实现文字横向循环滚动
  • VuePress 数学公式支持