TypeScript 构建工具之 webpack
在实际开发中，直接使用TypeScript 编译器的情况不多。
在项目中，需要使用构建工具对代码进行打包，不可能脱离项目使用TypeScript 编译器单独打包TypeScript 。
那如何将 webpack 和 TypeScript 进行集成？
参考文档：
webpack中文文档
Webpack TypeScript
在根目录下创建package.json文件：
npm init -y
安装核心依赖
- 首先确保已经安装了 Node.js 和 npm（或 yarn）。
- 在项目目录中，安装 Webpack 和相关的加载器及插件：
webpack：Webpack 的核心包。负责实际的模块打包和资源处理工作。webpack-cli：是 Webpack 的命令行工具，提供命令好界面。ts-loader：用于在 Webpack 中处理 TypeScript 文件。typescript：TypeScript 编译器。
使用 npm 安装这些包的命令如下：
npm install -D webpack webpack-cli typescript ts-loader
配置 Webpack
在项目根目录下创建一个webpack.config.js文件，用于配置 Webpack。
基本配置示例：
// 引入 Node.js 的内置模块 path
const path = require('path');// module.exports用于导出 Webpack 的配置对象。
// webpack中的所有配置信息都写在 module.exports 里。
// 这个配置对象包含了诸如入口文件、输出设置、加载器规则、插件等信息，用于告诉 Webpack 如何构建项目。
module.exports = {// 指定入口文件entry: './src/index.ts',// 指定打包文件所在目录output: {// 指定打包文件的目录path: path.resolve(__dirname, 'dist'),// 打包后的文件filename: 'bundle.js'},// 指定 webpack 打包时要使用的模块module: {// 指定要加载的规则rules: [{// 指定规则生效的文件test: /\.ts$/, // 表示匹配所有的后缀名为ts的文件// 要使用的loaderuse: 'ts-loader',// 要排除的文件夹(只要路径里有node_modules,就不编译)exclude: /node_modules/,}]},resolve: {extensions: ['.tsx', '.ts', '.js'],},
}
在这个配置中：
const path = require('path');用于引入 Node.js 的内置模块path。module.exports用于导出 Webpack 的配置对象。这个配置对象包含了诸如入口文件、输出设置、加载器规则、插件等信息，用于告诉 Webpack 如何构建项目。entry指定了项目的入口文件。output定义了输出的文件名和目录。module.rules配置了对.ts文件的处理规则，使用ts-loader进行编译，并排除了node_modules目录下的文件。resolve.extensions使得在导入模块时可以省略文件扩展名。
配置 TypeScript
在项目根目录下创建一个tsconfig.json文件，这是 TypeScript 的配置文件。
可以直接创建文件，使用命令行工具自动生成：
tsc --init
配置示例：
{"compilerOptions": {"module": "ES2015","target": "ES2015","strict": true}
}
编写 TypeScript 代码
在项目的src目录下创建 TypeScript 文件，例如index.ts，并编写你的 TypeScript 代码。
运行 Webpack 构建
- 直接使用
npx执行命令：
npx webpack
- 在
package.json文件配置一个执行命令后通过npm执行
在package.json文件增加一个配置：
"scripts": {"build": "webpack"
},
配置后，就可以运行以下命令来启动 Webpack 构建：
npm run build
执行命令后，生成dist文件夹，打包成功。
webpack集成typescript后，如何在html中运行？
当使用 Webpack 集成 TypeScript 后，可以通过以下步骤在 HTML 中运行打包后的代码：
安装必要的插件
html-webpack-plugin：这是一个非常常用的 Webpack 插件，用于自动生成 HTML 文件，并将打包后的 JavaScript 文件注入到其中。
使用 npm 安装这个插件：
npm install html-webpack-plugin --save-dev
配置 Webpack
在webpack.config.js文件中引入并配置html-webpack-plugin：
// 引入 Node.js 的内置模块 path
const path = require('path');
// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// 配置webpack插件plugins: [new HtmlWebpackPlugin({template: './src/index.html', // 指定模板 HTML 文件的路径}),],
};
在这个配置中，创建一个HtmlWebpackPlugin的实例，并指定了一个模板 HTML 文件的路径。这个插件会根据模板文件生成一个新的 HTML 文件，并将打包后的 JavaScript 文件自动注入到其中。
创建 HTML 模板文件
在项目的src目录下创建一个index.html文件，作为模板文件。这个文件包含基本的 HTML 结构。
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页模板</title>
</head>
<body></body>
</html>
打包后的 JavaScript 文件会自动注入到<script>标签中。
运行 Webpack 构建
运行以下命令来启动 Webpack 构建：
npm run build
Webpack 会根据配置进行构建，并在dist目录下生成一个新的 HTML 文件，其中包含了打包后的 JavaScript 文件的引用。
在浏览器中运行
打开生成的 HTML 文件（位于dist目录下），浏览器就会加载并执行打包后的 TypeScript 代码。
如何实现项目有变更时，自动重新构建项目，并自动刷新浏览器？
安装必要的插件
webpack-dev-server：用于启动一个开发服务器，支持热模块替换（HMR）等功能。
使用 npm 安装这个插件：
npm install webpack-dev-server --save-dev
相当于在项目里安装了一个内置的Webpack 开发服务器，可以让项目直接在服务器中运行。这个服务器是与Webapck关联的，当项目有变更时，可以自动构建并更新浏览器页面。
配置 Webpack
运行 Webpack
运行以下命令来启动开发服务器：
npx webpack serve
配置后，使用package.json 配置 npm run serve ，执行命令就报错了，emmm，这一步就等我研究研究再来补上吧=-= 哪位大佬走过路过不要错过，求指点啊啊啊啊啊