【TS】webpack打包ts代码

打包步骤

• 初始化项目：npm init -y
• 用来创建package.json文件
• 下载安装依赖包：
• npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

1. webpack：构建工具
2. webpack-cli：webpack的命令行工具
3. webpack-dev-server：webpack的开发服务器
4. typescript：ts编译器
5. ts-loader：打包编译typescript的
6. clean-webpack-plugin：用来清除文件

文件配置

• package.json 文件配置

{
	"name": "part3",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "webpack",
		"start": "webpack serve --open chrome.exe",
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"deDependencies":{
		"ts-loader": "^8.0.11",
		"typescript": "^4.1.2",
		"webpack": "^5.6.8",
		"webpack-cli": "^4.2.0",
	}
}

• webpack.config.js 文件配置

// 引入一个包
const path = require('path');

// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

// webpack 中所有的配置信息都应该写在module.exports中
module.exports = {
	// 指定入口文件
	entry: "./src/index.ts"
	// 指定打包文件所在的目录
	output: {
		// 指定打包文件的目录
		path: path.resolve(__dirname,'dist'),
		// 打包后文件的文件
		filename: "bundle.js",
		// 告诉webpack不使用箭头
		enviroment:{
			arrowFunction: false
		}
	},
	// 指定webpack打包时要使用的模块
	module:{
		// 指定要加载的规则
		rules: [
			// 指定规则生效的文件,正则表达式
			test: /\.ts$/,
			// 要使用的loader
			use: [
				// 配置babel
				loader: "babel-loader",
				// 设置babel
				options: {
					// 设置预定义的环境
					presets: [
						// 指定环境的插件
						"@babel/preset-env",
						// 配置信息
						{
							// 要兼容的目标浏览器
							targets:{
								"chrome": "88",
								"ie": "11",
							},
							// 指定corejs的版本
							"corejs": "3",
							// 使用corejs的方式 “usage”表示按需加载
							"useBuilIns": "usage",
						}
					]
				},
				'ts-loader',
			],
			// 要排除的文件
			exclude: /node-modules/
		]
	},
	// 配置webpack插件
	plugins: [
		new CleanWebpackPlugin(),
		new HTMLWebpackPlugin(options:{
			// title: "这是一个自定义的title"
			template: "./src/index.html"
		}), 
	],
	// 用来设置引用模块
	resolve: {
		extensions: ['.ts', '.js']
	}
	
}

• tsconfig.json 文件配置

{
	"compilerOptions":{
		"module": "ES2015",
		"target": "ES2015",
		"strict": true
	}
}