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']
    },