安装配置TypeScript ,安装TypeScript对应的第三方库
如lodash: npm i @types/lodash --sace-dev
查看TypeScript支持的第三方库
https://github.com/DefinitelyTyped/DefinitelyTyped
https://microsoft.github.io/TypeSearch/
npm install --save-dev typescript ts-loader
配置TypeScript的 tsconfig.json,更多配置查看官网
{
"compilerOptions": {
"outDir": "./dist/", // 打包后文件的位置
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"allowJs": true // 是否允许引入js
}
}
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
mode:'production',
entry: {
main:'./src/index.tsx'
},
output:{
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins:[
new HtmlWebpackPlugin({template: './src/index.html'}),
new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*']})
],
module:{
rules:[
{ // 处理 TypeScript文件
test:/\.tsx$/,
use:{
loader:'ts-loader'
},
exclude:/node_modules/
}
]
}
}