关于TypeScript的Webpack配置项

1.首先需要使用包管理器下载TypeScript的Loader以及下载一些插件

        npm下载TS装载器：

        ts-loader配置在webpack中，用于装载TS代码，在打包时将TS文件转成JS文件。

npm i -D ts-loader

        npm下载关于Webpack的插件：

        webpack不用多说。webpack-cli是webpack命令行工具，用于通过命令行使用webpack来构建和打包。html-webpack-plugin能够在指定目录下生成一个html文件，是可选的。

npm i -D webpack webpack-cli html-webpack-plugin

        npm下载关于Babel的插件：

        在Babel官网，对Babel做了很明确的定义：Babel是一个工具链，Babel主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码。

        babel/core是Babel的核心库，所有的核心Api都在这个库里，这些Api供Babel装载器调用。

        babel/preset-env列出了Babel的环境变量，是预设的集合，包含了相关的插件，而Bable是通过各种插件来指导如何进行代码转换。

        babel-loader则是Babel的装载器，它作为一个中间桥梁，通过调用babel/core中的api来告诉webpack要如何处理JS。

        而core-js则是一个JS的语法库，当你想要把ES6的代码转换到ES5时，在这时假设你调用了ES6新增的Promise，浏览器一看你用的ES5，根本没Promise呀，那咋办呢？这时就会从core-js这个JS的库中调用出来啦！

npm i -D @babel/core @babel/preset-env babel-loader core-js

2.下载好的插件，在webpack的配置文件webpack.config.js中进行配置

        webpack的部分配置选项：

// 先引入path
const path = require('node:path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

//webpack中的所有配置信息都应该导出
module.exports = {
	//设置webpack的模式是开发模式（development）还是生产模式（production）
	mode: 'production',

	//指定入口文件
	entry: './src/index.ts',

	//指定打包文件的信息
	output: {
		//指定打包文件的目录
		path: path.resolve(__dirname, 'dist'),

		//指定打包文件的文件名
		filename: 'bundle.js',
		//每次打包前先清空指定的文件夹
		clean: true,
		//
		environment: {
			arrowFunction: false, //告诉webpack，不使用箭头函数
		},
	},

	//指定webpack打包时要使用的模块
	module: {
		//指定loader的规则
		rules: [
			{
				//指定规则生效的文件，必须要用正则
				test: /\.ts$/,
				//指定test文件用什么loader来处理，可以对loader进行配置
				use: [
					//配置babel
					{
						//指定babel的加载器
						loader: 'babel-loader',
						//设置babel
						options: {
							//设置预定义的环境
							presets: [
								[
									//指定环境的插件
									'@babel/preset-env',
									//配置信息
									{
										targets: {
											//指定要兼容的浏览器的版本
											ie: '11',
											chrome: '88',
											firefox: '108',
										},
										/*
                                            指定刚下载的corejs的版本
                                            比如要兼容IE，代码中用到了那个版本里没有的东西，比如promise，那么corejs就会把它里面有的模块给导进行，那么就可以使用了
                                        */
										corejs: '3',
										//指定使用corejs的方式,usage表示按需加载
										useBuiltIns: 'usage',
									},
								],
							],
						},
					},
					'ts-loader',
				], //谁写在后面，谁先执行

				//指定要排除的文件，用正则
				exclude: /node-modules/,
			},
		],
	},

	//配置Webpack插件
	plugins: [
		//该插件会自动生成html文件，然后自动引入编译好的js文件
		// new HtmlWebpackPlugin(),
	],

	//设置哪些模块可以被导入，不设置直接导入并使用的话webpack打包会报错
	resolve: {
		extensions: ['.ts', '.js'], //设置以.ts .js作为后缀的话，都可以正常引入使用
	},
};

以上所做的配置，仅是对于TypeScript在Webpack中的配置。如果您还未对TypeScript配置文件进行配置的话，请参考我的另一篇文章：http://t.csdnimg.cn/3ZZ2o