首先創(chuàng)建一個(gè)文件夾learnTs
,之后進(jìn)入這個(gè)文件夾挠说,然后與npm init
·配置好后,
運(yùn)行cnpm install typescript tslint
愿题,之后運(yùn)行npx tsc --init
初始化配置文件,
之后安裝webpack cnpm install -D webpack webpack-cli webpack-dev-server
cnpm install -D ts-loader
cnpm install -D clean-webpack-plugin html-webpack-plugin
之后新建一個(gè)webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
entry:"./src/index.ts",
module:{
rules:[
{
test:/\.ts$/,
use:'ts-loader',
exclude:/node_modules/
}
]
},
devtool:'inline-source-map',
output:{
filename:"main.js",
},
devServer:{
contentBase:'./dist'
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
package.json寫入
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
src下創(chuàng)建一個(gè)index.ts文件
let a:number = 123
console.log(a)
npm run dev
運(yùn)行成功