- 综合排序
- 最热优先
- 最新优先
- 来自专栏京程一灯
十分钟搞定 TypeScript + webpack 配置
为了将 TypeScript 编译为JavaScript，webpack 使用了 loader（插件）ts-loader。 Scripts: tsc，tscw：如果我们将 webpack 与 ts-loader 一起使用，可能不会直接调用 TypeScript 编译器 tsc。 依赖项： Webpack incl 支持通过 CLI（命令行界面）和插件使用：webpack、webpack-cli、ts-loader、copy-webpack-plugin 需要 ts-loader $/, loader: "ts-loader" }, ], }, plugins: [ new CopyWebpackPlugin([ { from: 现在，我们不必配置 ts-loader ，并且 webpack 配置文件更加简单： const path = require('path'); module.exports = { entry:
3.4K22发布于 2020-05-11 - 来自专栏杨不易呀
TypeScript-webpack配置
前言初始化一个自动打包和自动加载最新 JS 代码的 webpack 项目，然后在通过 tsc --init 初始化 TypeScript 配置文件：图片通过 npm install typescript ts-loader 安装对应 loader：npm install typescript ts-loader修改 webpack 配置文件：图片图片图片最终 webpack 的配置内容如下：const path = require $/, use: 'ts-loader', exclude: /node_modules/ } ] dependencies": { "@types/jquery": "^3.5.0", "jquery": "^3.5.1", "reflect-metadata": "^0.1.13", "ts-loader
47320编辑于 2023-09-28 - 来自专栏js笔记
ts环境搭建
install -g typescript 生成配置文件 tsc --init 初始化工程 npm init 工程化 安装webpack、webpack-cli、webpack-dev-server、ts-loader 、typescript、html-webpack-plugin npm install webpack webpack-cli webpack-dev-server ts-loader typescript $/i, use: [{ loader: 'ts-loader' }], exclude:
49410编辑于 2022-10-25 - 来自专栏小皮咖
Webpack5 搭建 Vue3 + TS 项目
--save-dev 配置ts-loader解析： // webpack.base.js // rules { test: /\. (t|j)s$/, exclude: /node_modules/, use: [ { loader: 'ts-loader', options 为单进程执行类型检查和转译，因此效率有些慢，可以用多进程方案：即关闭ts-loader的类型检查，类型检查由 fork-ts-checker-webpack-plugin 插件执行。 (t|j)s$/, exclude: /node_modules/, use: [ { loader: 'ts-loader', options 在 babel7 之前，是需要同时使用 ts-loader 和 babel-loader 的，其编译过程 TS > TS 编译器 > JS > Babel > JS 。
1.9K30编辑于 2022-03-09 - 来自专栏前端皮小蛋
TypeScript 3.9 升级初体验
正文 本来以为很简单， 就是几行命令的事： yarn add typescript ts-loader 安装完毕， 控制台报了错： 我就知道！每次升级都不会顺利... 猜测是ts-loader的锅。 于是， 我就去扒了一下ts-loader的源码， 果然有所发现： https://github.com/TypeStrong/ts-loader/blame/1b84fed767c0fbb41f3da8c8700fc21d69fda3d3
96010发布于 2020-05-22 - 来自专栏clz
Webpack搭建简单的TypeScript脚手架
/myts.ts' myts.ts let age: number = 21 console.log(age) 处理TS文件其实也不难，只需要两个步骤就行： 安装ts-loader，npm install ts-loader 修改Webpack配置文件webpack.config.js，增加module节点 module: { rules: [ { // ts后缀名的文件会使用ts-loader test: /\.ts$/, use: ["ts-loader"] } ] } 增加TS new HtmlWebpackPlugin()], module: { rules: [ { // ts后缀名的文件会使用ts-loader test: /\.ts$/, use: ["ts-loader"] } ] } }
61210编辑于 2023-03-16 - 来自专栏编译思想
TypeScript与Babel、webpack的关系以及IDE对TS的类型检查
根据这个图，同学可能觉得这不是和ts-loader的架构很像吗？ 但是使用babel进行ts处理，比起ts-loader更加高效。 ts-loader 前面我们提到了ts-loader内部调用的是tsc作为编译器，我们尝试运行基于ts-loader的webpack配置进行打包该模块，会发现报错： ... ... 还记得我们前面的ts-loader吗？在代码编译期，ts-loader调用tsc，tsc读取项目目录下的tsconfig.json配置。 对于ts-loader项目体系来说，ts代码编译和ts的类型检测如下： 然而，对于babel-loader项目体系就不像ts-loader那样了： 在babel-loader体系中，代码的编译只取决于
1.4K30编辑于 2023-10-17 - 来自专栏LNMP开发那些事
使用typescript开发chrome扩展
安装依赖 必定需要用到的开发依赖项： chrome-types copy-webpack-plugin ts-loader typescript webpack-cli npm install chrome-types webpack-cli ts-loader typescript copy-webpack-plugin --save-dev 2. $/, use: 'ts-loader', exclude: /node_modules/, }, ], }, resolve: {
1.5K20编辑于 2023-10-19 - 来自专栏各类技术文章~
webpack打包typescript
当然大家也可以直接用npm或者cnpm进行安装，都是较为简单 命令： yarn add webpack webpack-cli 在基础的配置中，webpack只对js有效，因此我们需要把ts转化为js，需要用到ts-loader 包 命令：yarn add ts-loader 安装typescript，这是肯定需要的 命令： yarn add typescript 注意： 这里的typescript可以全局安装，也可以局部安装。 "^16.4.12", "body-parser": "^1.19.0", "express": "^4.17.1", "inquirer": "^8.1.2", "ts-loader $/, use: 'ts-loader', exclude: /node_modules/ }] }, resolve: { extensions: ['
2.6K00发布于 2021-09-22 - 来自专栏前端必修课
TypeScript 开发环境配置实战：Webpack 整合指南
安装必要依赖 为了让 Webpack 能够处理 TypeScript 文件，我们需要安装相关的加载器： npm install typescript ts-loader --save-dev Webpack 模块处理配置 module: { rules: [ { test: /\.ts$/, use: "ts-loader 模块处理（module） 配置ts-loader 处理所有.ts 文件，将 TypeScript 代码转换为浏览器可执行的 JavaScript。
54000编辑于 2025-03-06 - 来自专栏flytam之深入前端技术栈
两个配置修改，让你的webpack打包速度飞起来
app/b app/c），并且是用同一套webpack的配置进行打包，每次构建的时候通过传入特定的参数打包指定的业务 优化1 使用babel7，@babel/preset-typescript替代ts-loader 使用babel7并且使用@babel/preset-typescript代替ts-loader。 一方面，babel7拥有着更快的速度，另一方面，ts-loader默认是会读取ts-config的，于是每次构建的时候ts-loader都会去检查全有业务的类型（即使我们只打包a业务）。
2.5K20发布于 2020-01-14 - 来自专栏mySoul
webpack基础
出口，即编译完成后生成的文件 load load为代码转换，可以使用这个加载css文件，使用这个将typeScript转为JavaScript 安装 npm install --save-dev ts-loader app.js vendors.js path: '/home/assets' // 输出后的绝对路径 }, module: { rules: [ {test: /\.ts$/, use: 'ts-loader app.js vendors.js path: '/home/assets' // 输出后的绝对路径 }, module: { rules: [ {test: /\.ts$/, use: 'ts-loader
74920发布于 2018-10-17 - 来自专栏亦枫的大佬之路
webpack中的loader
为此，首先安装相对应的 loader： npm install --save-dev css-loader npm install --save-dev ts-loader 然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader： webpack.config.js module.exports = { module: { rules : [ { test: /\.css$/, use: 'css-loader' }, { test: /\.ts$/, use: 'ts-loader' } ] }
79020发布于 2020-03-19 - 来自专栏前端技术分享|前沿资讯|读书分享
webpack实战——预处理器(loader)【下篇】
2. ts-loader 作用 “用于连接Webpack与TypeScript的模块 安装 npm install ts-loader typescript 配置 rules: [ { test: /\.ts$/, use: 'ts-loader' } ] 说明 学习或使用过typescript的开发者都知道，typescript的配置信息在工程目录下的tsconfig.jsson 中，因此在ts-loader中不配置，直接对tsconfig.json进行配置即可。
1.3K11发布于 2020-08-06 - 来自专栏前端小菜鸡yym
webpack + react + ts + semiDesign +electron
这里需要将tsx转为js 这里通过正则找到tsx然后对其 使用到了 ts-loader。 module.exports = { entry: ". " ] } ] } } 装 ts-loader yarn add -D ts-loader 装 typescript 因为 ts-loader中使用了typescript yarn add -D typescript 遇到的错误 在我们都装好了之后，我们执行 yarn run build。 $/, use: [ "ts-loader" ] } ] $/, use: [ "ts-loader" ] } ]
2.6K50编辑于 2023-01-12 - 来自专栏前端小叙
webpack5 devServer浏览器打开显示 can not get
[ { test: /\.ts$/i, use: { loader: "ts-loader devDependencies": { "clean-webpack-plugin": "^4.0.0", "html-webpack-plugin": "^5.5.3", "ts-loader
54110编辑于 2023-08-09 - 来自专栏前端Q
我们如何使用 Webpack 将启动时间减少 80%
我们使用 ts-loader： npm install --save-dev ts-loader module.exports = { // ... test: /\.ts$/, // this rule will only activate for files ending in .ts use: [{ loader: 'ts-loader 注意：如果你使用这个，请确保更新步骤 5 中的 module.rules.use 为：{loader: 'ts-loader'， options: {transpileOnly: true}}，这样 ts-loader test: /\.ts$/, // this rule will only activate for files ending in .ts use: [{ loader: 'ts-loader
1.8K20编辑于 2022-05-23 - 来自专栏一Li小麦
typescript基础篇（1）：helloworld
$/i, use: [{ loader: 'ts-loader' }], // 使用ts-loader /src/tpl/index.html' //通过模板生成网站首页，并把内容内嵌到html中 }) ] } 在上面的文件中，我们使用ts-loader加载ts/tsx。 同时还需要本地再次安装ts npm i ts-loader typescript html-webpack-plugin -D html-webpack-plugin插件的作用是：通过制定模板生成网站首页
99920发布于 2020-08-07 - 来自专栏Vue中文社区
Webpack5 搭建 Vue3 + TS 项目
--save-dev 配置ts-loader解析： // webpack.base.js // rules { test: /\. (t|j)s$/, exclude: /node_modules/, use: [ { loader: 'ts-loader', options 为单进程执行类型检查和转译，因此效率有些慢，可以用多进程方案：即关闭ts-loader的类型检查，类型检查由 fork-ts-checker-webpack-plugin 插件执行。 (t|j)s$/, exclude: /node_modules/, use: [ { loader: 'ts-loader', options 在 babel7 之前，是需要同时使用 ts-loader 和 babel-loader 的，其编译过程 TS > TS 编译器 > JS > Babel > JS 。
2.5K50发布于 2021-05-24 - 来自专栏前端导学
使用wepack、typescript创建一个angularjs项目
/angular": "^1.6.57", "@types/angular-ui-router": "^1.1.40", "@types/node": "^7.10.9", "ts-loader extensions: ['.ts', '.js'] }, module: { loaders: [{ test: /\.ts$/, loader: 'ts-loader
1.2K20发布于 2020-03-19
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号