【学习笔记】使用webpack打包TypeScript代码

君的名字

已于 2024-02-08 09:52:05 修改

阅读量536

点赞数 3

分类专栏：【TypeScript】文章标签：学习笔记 webpack

于 2024-02-07 17:52:33 首次发布

本文链接：https://blog.csdn.net/chichoxian/article/details/136065949

版权

【TypeScript】专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

写在前面的话
使用安装
参考文献

写在前面的话

使用webpack 打包TS的代码，我们需要用到 npm这个包管理工具，我们首先进入到我们的代码根目录下，然后输入下面这个命令：

npm init -i

这个时候就会在我们项目的目录下面生成 package.json这个文件

输入这个命令，按照自己的需要输入每一个配置属性需要的值，之后输入回车即可

在这里插入图片描述

一路回车之后，我们可以得到下面这样一个package.json

{
  "name": "part2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

使用安装

首先，我们用npm 包管理工具来安装我们的webpack以及一些必须的包以及依赖

npm i -D   webpack webpack-cli ts-loader typescript

i 表示的是install 的简写，-D表示的是开发依赖安装好之后我们会得到一个更新之后的 package.json文件

{
  "name": "part2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.5.1",
    "typescript": "^5.3.3",
    "webpack": "^5.90.1",
    "webpack-cli": "^5.1.4"
  }
}

我们要使用webpack这个工具需要增加一个webpack.config.js 文件

在这里我们可以添加一些我们的打包说明。

在这里插入图片描述

指定执行的入口文件和输出路径，之后我们可以指定打包时候需要的模块。

在这里插入图片描述
之后在tsconfig.json文件中写入相关的编译配置选项

在这里插入图片描述

要打包我们的代码项目，这个时候再在package.json 文件中加入一句 "build" : webpack

{
  "name": "part2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.5.1",
    "typescript": "^5.3.3",
    "webpack": "^5.90.1",
    "webpack-cli": "^5.1.4"
  }
}