摘要: 注意执行以下命令安装包 npm init -y npm i typescript npm i ts-loader npm i webpack -g npm i webpack-cli -g npm html-webpack-plugin npm webpack-dev-servernpm @babe 阅读全文
posted @ 2021-04-29 16:53 zmztyas 阅读(566) 评论(0) 推荐(0) 编辑
摘要: { /* 用来指定哪些ts文件需要被编译 ** 表示任意目录 * 表示任意文件 */ "include":[ "./src/**/*" ], /* 不需要被编译的文件 */ "exclude":[ "./src/hello/**/*" ], "compilerOptions": { /* 用来指定t 阅读全文
posted @ 2021-04-29 15:34 zmztyas 阅读(88) 评论(0) 推荐(0) 编辑
摘要: 1.初次尝试 /* 注意: 声明一个变量,同时指定它的类型为number */ let a : number a=10 a=35 /* a = 'hello' 此行代码会报错,因为变量a的类型是number 不能赋值字符窜 注:即使报错, 但是还是编译通过,但是编译后控制台会提示错误内容 */ 2. 阅读全文
posted @ 2021-04-29 11:04 zmztyas 阅读(98) 评论(0) 推荐(0) 编辑
摘要: 1. 解决typescript Cannot redeclare block-scoped variable 解决: 在ts文件顶端加上 export {}文件编译后 "use strict" exports.__esModule = true 原理:会把整个文件当成一个模块来处理 阅读全文
posted @ 2021-04-29 10:51 zmztyas 阅读(67) 评论(0) 推荐(0) 编辑
摘要: 1.下载node.js 2.安装node.js 3.使用npm全局安装typescript (vscode 实际环境已经有typescript了,所以不需要执行这一步) .进入命令行 . 输入:npm i -g typescript 3.1:以上步骤不需要执行 1.创建一个文件,然后 tsc --i 阅读全文
posted @ 2021-04-29 09:25 zmztyas 阅读(166) 评论(0) 推荐(0) 编辑
摘要: 总结: 1/ts就是包含javascript所有的内容,同时扩展了新特性,js有的ts都有 2/能够编译所有版本的js(es3) ,简介解决了兼容性问题 TypeScript是什么? TypeScript增加了什么? 阅读全文
posted @ 2021-04-29 09:04 zmztyas 阅读(37) 评论(0) 推荐(0) 编辑
摘要: optimization:{ splitChunks:{ chunks:'all', //以下这些默认值不用写 minSize:30*1024 ,//分割的chunk最小为30kb maxSize:0,//最大没限制, minChunks: 1 , //要提取的chunk最受被引用1次, maxAs 阅读全文
posted @ 2021-04-29 08:48 zmztyas 阅读(94) 评论(0) 推荐(0) 编辑
摘要: mode:'development', devServer:{ //运行代码的目录 contentBase:resolve(__dirname,'build'), //监视 contentBase 目录下的所有文件,一但文件变化就会 reload (重新打包,重新加载浏览器) watchConten 阅读全文
posted @ 2021-04-29 02:08 zmztyas 阅读(363) 评论(0) 推荐(0) 编辑
摘要: devServer:{ }, //解析模块的规则 resolve:{ //配置解析模块路径别名:优点:简写路径 缺点:路径没有提示了 alias:{ $css:resolve(__dirname,'src/css') }, //配置省略文件路径的后缀名 extensions:['.js','.jso 阅读全文
posted @ 2021-04-29 01:58 zmztyas 阅读(109) 评论(0) 推荐(0) 编辑
摘要: module:{ rules:[ //loader配置 { test:/\.css$/, //多个loader用use use:['style-loader','css-loader'] }, { test:/\.js$/, exclude:/node_modules/, //只检查 src 下的j 阅读全文
posted @ 2021-04-29 01:45 zmztyas 阅读(123) 评论(0) 推荐(0) 编辑
摘要: module.exports = { entry:'./src/index.js' output: { //文件名称(指定名称+目录) filename:'js/[name].js' //输出文件目录(将来所有资源输出的公共目录) path:resolve(__dirname,'build'), / 阅读全文
posted @ 2021-04-29 01:38 zmztyas 阅读(269) 评论(0) 推荐(0) 编辑
摘要: entry: 入口起点 1. string --> './src/index.js' 打包形成一个chunk,输出一个bundle文件 此时chunk的名称默认是main 因为没有制定输出的名字 output: {filename: '[name].js',path:resolve(__dirnam 阅读全文
posted @ 2021-04-29 01:04 zmztyas 阅读(168) 评论(0) 推荐(0) 编辑
摘要: ## 开发环境性能优化 *优化打包构建速度 HMR *优化代码调试 source-map ##生产环境性能优化 #优化打包构建速度 *oneOf *babel缓存 *多进程打包 *externals *dll #优化代码运行的性能 *缓存(hash-chunkhash-contenthash)<文件 阅读全文
posted @ 2021-04-29 00:36 zmztyas 阅读(39) 评论(0) 推荐(0) 编辑
摘要: 这里与webpack(21)的内容差不多 但是思路不一样 webpack(21) 是cdn优化,是不打包node_module,然后引入cdn访问地址 这里是先将node_module先打包一次,后面不需要再打包,直接引用打包好的文件就行,这里的直接引用,还需要以下配置,否则就会出现用的不是打包的j 阅读全文
posted @ 2021-04-29 00:14 zmztyas 阅读(160) 评论(0) 推荐(0) 编辑