全局安装 TypeScript：
npm install -g typescript
安装完成后，在控制台运行如下命令，检查安装是否成功
tsc -V
下载依赖
安装依赖涉及版本问题，确保各个版本之间必须兼容
yarn add -D typescript 安装ts
yarn add -D webpack webpack-cli 脚手架
yarn add -D webpack-dev-server 启动工具
yarn add -D html-webpack-plugin clean-webpack-plugin html打包、清理包工具
yarn add -D ts-loader 编译ts
yarn add -D cross-env 涉及跨平台命令
使用版本：
创建目录
入口JS: src/main.ts
document.write('Hello Webpack TS!')
index页面: public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack & TS</title>
</head>
<body></body>
</html>
build/webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const isProd = process.env.NODE_ENV === 'production' // 是否生产环境
function resolve (dir) {
return path.resolve(__dirname, '..', dir)
}
module.exports = {
mode: isProd ? 'production' : 'development',
entry: {
app: './src/main.ts'
},
output: {
path: resolve('dist'),
filename: '[name].[contenthash:8].js'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
include: [resolve('src')]
}
]
},
plugins: [
new CleanWebpackPlugin({
}),
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',
devServer: {
host: 'localhost', // 主机名
stats: 'errors-only', // 打包日志输出输出错误信息
port: 8081,
open: true
},
}
初始化项目npm init -y
自动生成package.json
初始化 tsc --init
自动生成tsconfig.json
配置打包命令
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
运行与打包
yarn dev
yarn build
运行成功
