使用webpack,编译前端ts项目
2022/3/19 6:28:24
本文主要是介绍使用webpack,编译前端ts项目,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
步骤:
- 下载安装webpack
"webpack","webpack-cli"
npm install webpack webpack-cli --save-dev
-
下载ts-loader和html-webpack-plugin插件,供webpack编译使用
-
创建webpack.config.js文件,内容如下:
// @ts-ignore const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: ['./src/main.ts'], output: { clean: true, path: __dirname + '/build', filename: './[fullhash]bundle.js', }, resolve: { // Add `.ts` and `.tsx` as a resolvable extension. extensions: [".ts", ".tsx", ".js"] }, module: { rules: [ // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` { test: /\.tsx?$/, loader: "ts-loader" } ] }, plugins: [new HtmlWebpackPlugin( { template: 'public/index.html', filename: 'index.html' } )] }
- 在package.json 上添加启动打包命令
{ "scripts": { "dev:webpack": "./node_modules/.bin/webpack" } }
- main.ts上编写ts内容如下:
let itemName = 'hello typeScript' let foo = function(name: string){ console.log(name) setTimeout(()=>{ document.write('hello ts') },500) } foo(itemName)
- 运行打包命令,完成打包,打开打包后的html,即可得如下内容
这篇关于使用webpack,编译前端ts项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-26uniapp 哪里看mp-html 是否有引用-icode9专业技术文章分享
- 2024-09-26uniapp 怎么显示html 代码-icode9专业技术文章分享
- 2024-09-26uniapp 有没有自带mp-html 吗-icode9专业技术文章分享
- 2024-09-25前端高频大厂面试真题解析与实战教程
- 2024-09-25前端高频面试题详解:新手必看指南
- 2024-09-25前端高频面试真题详解与实战攻略
- 2024-09-25前端大厂面试真题及答案详解:从零开始的初级面试攻略
- 2024-09-25前端面试实战:新手必备技巧与案例解析
- 2024-09-25前端面试题及答案详解:初级面试必备
- 2024-09-25前端面试真题及答案详解:适合入门与初级用户