webpack 搭建ts环境
ts 需要在typesctipt 运行
ts 运行过程: ts_–>编译为js文件—>运行js
1: 安装依赖
- typescript 是ts的运行环境,将ts编译为 js文件
- awesome-typescript-loader 是webpack 将 ts 语法 变为 js
- html-webpack-plugin
- webpack
- webpack-cli
2: 创建webpack.config.js文件
初始化文件
module.exports = {
mode:'development',
entry:'./src/index.ts',
output:{
path:path.resolve(__dirname,'dist'),
filename:"[name].js"
},
}
3: 配置loader 编译ts 配置创建打包html
const path = require("path");
const HtmlWebpack = require('html-webpack-plugin')
module.exports = {
mode:'development',
entry:'./src/index.ts',
output:{
path:path.resolve(__dirname,'dist'),
filename:"[name].js"
},
module:{
rules:[
{
test: /\.ts$/,
loader: 'awesome-typescript-loader',
}
]
},
plugins:[
new HtmlWebpack({
template:'./index.html',
filename:'index.html',
chunks:['main']
})
]
}
4: 解决bug
bug: import {za} from ‘./moduleA’ 报错,不能解析这个模块
2 如果 import {za} from ‘./moduleA.ts’ 开发者工具 报错,语法错误 推荐 import {za} from ‘./moduleA’
解决: 让webpack 可以解析这种语法 import {za} from ‘./moduleA’
resolve:{
extensions:['.ts','.js']
},