文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

webpack搭建脚手架打包TypeScript代码

2024-04-02 19:55

关注

创建文件夹

目录结构: dabaots

初始化 npm init -y生成package.json文件

目录结构:
dabaots
dabaots / package.json

然后在开发环境中安装以下几个工具


npm i -D

webpack··························(打包代码的核心工具
webpack-cli·····················(webpack的命令行工具)
typescript ·······················(写ts所需的核心包)
ts-loader ·························(通过ts-loader可以对webpack和ts进行整合)
html-webpack-plugin … (是自动生成html的一个webpack插件)
webpack-dev-server … (无需刷新更新页面)
clean-webpack-plugin … ( 每次打包上线之前都会自动清空dist内的文件如何重新生成最新的文件)
"@babel/core" “@babel/preset-env” babel-loader core-js(安装babel转换,你是什么环境他就会转成什么代码)

可能会遇到的小问题:这里可能会出现的问题就是你下载的依赖包webpack-dev-server版本如果和谷歌的不适配,建议将插件版本改低一点或者谷歌浏览器升级成最新版本否则会出现错误Cannot GET /chrome.exe

接下来创建webpack.config.js进行配置

目录结构:
dabaots
dabaots / package.json
dabaots / webpack.config.js


// 引入一个包
const path = require("path")

//引入自动生成html的包
const HtmlWebpackPlugin = require("html-webpack-plugin")

//引入更新dist文件的插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// webpack中的所有的配置信息都应该写入moudle.exports中
module.exports={
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包文件的目录
        path:path.resolve(__dirname,"dist"),
        // 指定打包后文件的文件
        filename:"bundle.js",
        //编译的时候不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    
    //webpack打包时要使用到module这个模块
    module:{
        // 指定要加载的规则
        rules:[{
            // test指定的是规则生效的文件
            test:/\.ts$/,
            // use是要使用的loader
            //配置babel
            use:[
                {//指定加载器
                    loader:"babel-loader",
                    options:{
                        //设置预定义环境
                        presets:[
                            [
                                //指定环境的插件
                                "@babel/preset-env",
                                //配置信息
                                {
                                    //要兼容的浏览器
                                    targets:{
                                        "chrome":"88"
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    //表示按需加载
                                    "useBuiltIns":"usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader'
            ],
            //设置不被打包上传的文件
            exclude:["/node_modules/"]
        }]
    },
    
    // 配置webpack插件
    plugins:[
        new HtmlWebpackPlugin({
            // 自定义html模板地址
            template:"./src/index.html"
        }),
        //每次打包上线之前都会自动清空dist内的文件如何重新生成最新的文件
        new CleanWebpackPlugin()
    ],
    
    resolve:{
        //解决在ts文件内部单独引入其他ts包时候报错的问题
        extensions:['.ts','.js']
    }
}

最后在package.json中写入打包及运行等脚本

在终端npm run build 打包运行即可

打包成功后会自动生成一个dist文件

npm run start 自动打开谷歌浏览器且内容为热更新的

到此这篇关于webpack搭建脚手架打包TypeScript代码的文章就介绍到这了,更多相关webpack打包TypeScript代码内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯