npm初始化
使用npm来初始化package.json文件：
npm init是 Node.js 中的一个命令行工具，用于初始化一个新的 Node.js 项目。当你在一个新的文件夹中运行 npm init 命令时，npm 会引导你完成一个交互式的配置过程，询问你关于项目的一些基本信息。这个过程包括：
- 项目名称（name）： 你的项目的名称，必须是唯一的。
- 版本号（version）： 你的项目的初始版本号，通常为 1.0.0。
- 项目描述（description）： 对你的项目进行简短的描述。
- 入口文件（entry point）： 你的项目的主要 JavaScript 文件，通常是 index.js。
- 测试命令（test command）： 运行项目测试的命令。
- git 仓库（git repository）： 你的项目的 Git 仓库地址。
- 作者（author）： 项目的作者信息。
- 许可证（license）： 项目的开源许可证，比如 MIT、Apache 等。
csharp
npm init随后执行
npm install webpack webpack-cli -D在项目中安装 webpack 和 webpack 命令行工具（webpack-cli），并将它们添加到项目的开发依赖（-D 是 --save-dev 的缩写，表示安装到开发依赖中）。这两个工具在前端开发中用于打包和构建项目。
通过这个命令，可以将 webpack 添加到你的项目中，并在命令行中使用 webpack 命令进行项目的打包和构建工作。
创建文件webpack.config.js
在package.json中添加打包命令
bash
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack"
},
安装 ts-loader 和 typescript，两者分别用于处理 TypeScript 文件的加载和 TypeScript 语言的编译，执行如下命令
npm install ts-loader typescriptts-loader: ts-loader 是一个用于 Webpack 的 TypeScript 加载器。它允许你在 Webpack 构建过程中加载 TypeScript 文件，并将其编译为 JavaScript。ts-loader 会将 TypeScript 文件传递给 TypeScript 编译器进行处理，然后将编译后的 JavaScript 文件交给 Webpack 进行打包。这样，你可以在 Webpack 构建过程中使用 TypeScript。
typescript: typescript 是官方的 TypeScript 编译器。它能够将 TypeScript 代码编译为 JavaScript。通过安装 typescript，你可以在项目中使用 TypeScript 语法，包括类型声明、类、接口等。ts-loader会将 TypeScript 文件传递给这个编译器进行实际的编译操作。
在webpack.config中配置模块加载规则
这段配置代码是用于 Webpack 的 rules（规则）部分，它告诉 Webpack 在处理文件时如何使用 ts-loader 这个加载器。具体来说，这段配置的作用是：
test: /.ts$/: 这是一个正则表达式，它指定了哪些文件需要被这个规则匹配。在这里，所有以 .ts 结尾的文件都会被匹配到。
loader: "ts-loader": 当符合上述正则表达式的文件被匹配时，Webpack 就会使用 ts-loader 这个加载器来处理这些文件。ts-loader 负责将 TypeScript 文件（.ts）转换为 JavaScript 文件，使得它们可以被浏览器或 Node.js 等 JavaScript 运行时环境执行。
所以，这段配置的目的是，当 Webpack 遇到以 .ts 结尾的文件时，会使用 ts-loader 加载器进行处理，将这些 TypeScript 文件转换为可以在浏览器或其他 JavaScript 运行时环境中执行的 JavaScript 文件。
bash
rules: [
{
test: /.ts$/,
loader: "ts-loader",
},
],
配置tsconfig.json
tsc --init\] 命令用于在 TypeScript 项目中生成一个 tsconfig.json 文件。tsconfig.json 是 TypeScript 的配置文件，它允许你指定 TypeScript 编译器如何处理项目中的 TypeScript 文件。 当运行` tsc --init `命令时，TypeScript 编译器会在当前项目目录下生成一个默认的 tsconfig.json 文件，该文件包含了一些基本的配置选项。你可以在生成的 tsconfig.json 文件中根据项目的需求修改配置，例如指定编译输出目录、配置编译选项、包含或排除特定文件等。这样，当你运行 tsc 命令时，TypeScript 编译器会根据 tsconfig.json 文件中的配置来编译项目中的 TypeScript 文件。 ```csharp tsc --init ``` 为webpack增加配置文件内容 ```css resolve: { extensions: [".ts", ".js", ".cjs", ".json"] }, ``` 在 webpack 的配置中，resolve.extensions 是一个用于配置在引入模块时可以省略的文件扩展名的列表。当你在代码中导入一个模块时，如果没有指定文件扩展名，webpack 会根据 resolve.extensions 中配置的扩展名列表尝试匹配文件。如果找到匹配的文件，则会成功导入。 这个配置告诉 webpack，在解析模块时，如果文件扩展名是 .ts、.js、.cjs 或 .json，可以省略不写。例如，如果你在代码中写了： import MyModule from './my-module'; Webpack 会依次尝试寻找 my-module.ts、my-module.js、my-module.cjs 和 my-module.json 这些文件，如果找到其中任意一个文件，就会成功导入 MyModule 模块。 这个配置的目的是简化导入语句，使开发者在代码中不必每次都写全文件的扩展名，提高代码的可读性和编写效率。 随后执行`npm run build `，并创建一个index.html文件来加载打包好的`bundle.js` ```xml