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 typescript

ts-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 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

并在浏览器执行

如果想配置npm run serve直接在浏览器运行ts代码

css 复制代码

npm install html-webpack-plugin -D

在 Node.js 项目中安装 html-webpack-plugin 这个 npm 包。html-webpack-plugin 是一个 webpack 插件，它的主要作用是简化 HTML 文件的创建。在使用 webpack 构建前端项目时，通常需要生成一个 HTML 文件，并将打包生成的 JavaScript 文件自动添加到这个 HTML 文件中，以便在浏览器中正确加载应用程序。

html-webpack-plugin 可以根据配置自动生成一个 HTML 文件，并自动将 webpack 打包生成的 JavaScript 文件（通常是一个或多个 bundle 文件）引入到这个 HTML 文件中。这样，在项目构建时，开发者不再需要手动创建和维护 HTML 文件，而是由 webpack 插件自动完成这个任务。

以及

vbscript 复制代码

npm install webpack-dev-server -D

webpack-dev-server 是一个基于 Express.js 的轻量级开发服务器，它的作用是为你提供一个快速的本地开发环境，方便你在开发过程中测试和调试前端代码。

随后在webpack中增添配置

css 复制代码

 plugins: [
    new HtmlWebpackPlugin({
        template: "./index.html"
    })
  ]

在Webpack配置中，plugins 是一个数组，它用于配置插件。插件是Webpack的一个核心概念，它可以用来执行范围更广的任务，比如优化、压缩、代码分离等。HtmlWebpackPlugin 是其中一个常用的插件。

具体来说，new HtmlWebpackPlugin({...}) 这段配置的作用是：

自动生成HTML文件： HtmlWebpackPlugin 会根据配置的模板文件（template 参数指定的文件，这里是 "./index.html"）生成一个新的HTML文件。

自动引入打包后的JS文件：在生成的HTML文件中，HtmlWebpackPlugin 会自动引入Webpack打包生成的JS文件（通常是一个或多个bundle文件），无需手动修改HTML文件中的

这样做的好处是，当你的项目中的JavaScript文件发生变化时，Webpack会自动重新构建（重新打包），而HtmlWebpackPlugin会自动更新生成的HTML文件，确保引入的JS文件是最新的版本。

以及package.json中增添配置

bash 复制代码

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack",
    "serve": "webpack server"
  },

在Webpack配置中，plugins 是一个数组，用于添加各种Webpack插件。Webpack插件是用来执行范围更广、能力更强大的任务的工具。HtmlWebpackPlugin 是其中一种插件，它的作用是生成一个 HTML 文件，并自动将打包后的 JavaScript 或 CSS 文件引入到这个 HTML 文件中。

在你提供的代码中，HtmlWebpackPlugin 被配置为一个插件实例，并传入了一个配置对象：

template: "./index.html"：这个选项指定了模板文件的路径，也就是 HtmlWebpackPlugin 会以这个文件为基础生成最终的 HTML 文件。通常，这个模板文件包含了你的页面结构、样式、脚本等基本信息，而插件则会在这个模板的基础上添加打包后的资源引用。

在Webpack构建过程中，HtmlWebpackPlugin 将读取指定的模板文件，将打包后的输出文件（通常是 JavaScript 或 CSS 文件）自动插入到模板文件中，并生成一个新的 HTML 文件。这个新生成的 HTML 文件会被保存到你的输出目录（通常是 dist 文件夹）中。

这样，你就不需要手动在 HTML 文件中引入打包后的脚本和样式文件，Webpack 的 HtmlWebpackPlugin 插件会帮你自动完成这个任务。这种自动化的方式简化了开发流程，特别是在多入口、多输出文件的项目中，它能够极大地提高开发效率。

随后可以正常运行

webpack搭建ts环境

npm初始化