webpack 搭建 ts 环境

最新推荐文章于 2022-09-04 22:15:04 发布

一夏℃

最新推荐文章于 2022-09-04 22:15:04 发布

阅读量160

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/weixin_44411341/article/details/119010580

版权

本文档详细介绍了如何使用webpack逐步搭建TypeScript的开发环境，包括初始化项目、设置目录结构、安装必要的依赖如awesome-typescript-loader、typescript、webpack及webpack-cli等，以及配置webpack.config.js文件和使用html-webpack-plugin打包HTML。最后，通过npx webpack命令进行编译打包并运行程序。

摘要由CSDN通过智能技术生成

webpack 搭建 ts 环境

ts需要在typesctipt运行
ts运行过程: ts上----->编译为js文件—>运行js

1.初始化项目

npm init

2.目录结构

在这里插入图片描述

3.开发实例代码

//index.ts
import  {user} from './moduleA'
console.log("ts is run");
console.log(user);

// typeScript 是 JavaScript 的超级集群 是强类型
// any 任意类型
let dog  = "This is a dog";

// 类型声明，作用：限制变量只能赋值某个类型的数据
// 变量名字：静态类型
let a:number = 123;
// :void 返回值是 undefined
function foo(a:string,b:number):void{
    // 形参a 为string 类型
    // 形参b 为 number 类型

}
foo("name",12)

let obj :{
    name:string,
    age:number,
}={
    name:'zhangsan',
    age:12,
}
console.log(obj);

//module.ts
let nam  = "I am "
export let user = "我是用户"

4.安装依赖

awesome-typescript-loader 是webpack 编辑ts的loader
typescript 是ts的运行环境
webpack webpack 的运行环境
webpack-cli 提供webpack运行的命令
html-webpack-plugin 打包编译html文件
命令：npm i -D awesome-typescript-loader typescript webpack webpack-cli html-webpack-plugin

5.创建 webpack.config.js 文件

module.exports = {
    mode:'development',
    entry:'./src/index.ts',
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:'[name].js'
    },
}

6.配置 loader plugin

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'
    },
    // 告诉webpack 怎样解析
    // //比如:导入文件./foo.js
    // --->我们编写的import './foo'
    // webpack解读的import './foo.js'

    resolve:{
        // bug: import {za} from './moduleA' 报错，不能解析这个模块
        // bug: 如果import {za} from ' ./moduleA.ts' 开发者工具报错,语法错误 推荐import {za} from ' ./moduleA '
        //解决:让webpack 可以解析这种语法 import {za} from ' ./moduleA'
        extensions:['.js','.ts']
    },
    module:{
        rules:[
            {
              test:/\.ts$/i,
              use:['awesome-typescript-loader']  
            }            
        ]
    },
    plugins:[
        new HtmlWebpack({
            template:'./index.html',
            filename:'index.html',
            chunks:['main']
        })
    ]
}