在Webpack构建工具使用TS

1、先将项目初始化成webpack

• 先进入项目根目录，执行 npm init -y

npm init -y
作用就是先创建package.json文件

2、下载构建工具包

npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin typescript ts-loader

• 需要以下七个工具包
• webpack
  • 构建工具webpack
• webpack-cli
  • webpack的命令行工具
• webpack-dev-server
  • webpack的开发服务器，文件变动可以实时更新
• html-webpack-plugin
  • webpack中的html插件，用来自动创建html文件，自动引入js文件
• clean-webpack-plugin
  • webpack中的清除插件，每次构建打包前都会先清除目录
• typescript
  • TS编译器
• ts-loader
  • ts加载器，用于在webpack中编译TS文件

3、创建基本文件

1. 在根目录下创建src文件夹
2. 在src下创建index.ts文件
3. 在src下创建index.html文件模板

3、根目录下创建webpack.config.js

用来对webpack进行一些配置

1. 首先引入文件

const path = require('path')；// 可以用来帮我们拼接路径

const HTMLWebpackPlugin = require('html-webpack-plugin'); // 引入可以自动生成html文件的插件

const CleanWebpackPlugin = require('clean-webpack-plugin'); // 可以在构建打包前先将打包的目录文件清除

2. 使用commonjs语法向外暴露一个对象

module.exports = {}

3. 在暴露的对象中对webpack做一些初始化配置

module.exports = {
	entry: './src/index.ts', // 指定入口文件

	// 指定打包文件所在的目录
	output:{
		// 指定打包文件所在的目录
		path: path.resolve(__dirname, "dist"), // 使用引入的path拼接一个文件夹出来 
		filename: "bundle.js" //  打包后文件的文件名
	},
	
	// 指定webpack打包时要使用的模块,就是使用哪些模块来编译哪些文件
	module:{
		// 指定要加载的规则
		rules:[
			test: /\.ts$/, // 使用ts匹配出以 .ts 结尾的文件
			use: 'ts-loader', // 将匹配出来的以 .ts 结尾的文件使用 ts-loader 来处理
			// 要排除的文件
			exclude: /node-modules/，文件夹中包含这个正则表达式的文件不会被编译 
		]
	},
	
	// 配置webpack的插件
	plugins:[
		// 自动生成html文件，并引入相关资源
		new HTMLWebpackPlugin({
			// title: '这是一个自定义的title', // 可以自定义生成的html页面的title
			// 或者使用一个html文件作为模板来设置成打包的文件模板
			template: "./src/index.html",// 将当前路径下的文件作为模板来生成打包后的文件
		}),
		
		// 在打包前先将打包的目录清除，避免有残留的文件,使其得到的一直是最新的
		// 不使用这个插件打包的文件都是以覆盖的形式来进行替换
		new CleanWebpackPlugin()
	],

	// 用来设置引用模块,就是那些文件可以作为模块使用，不然打包会报错
	resolve:{
		extensions:['.ts', '.js'], // 以ts与js结尾的文件可以使用模块来进行导出导入语法
	},

	// 设置webpack当前的模式，不然启动会报错
	modu: 'production',
	
}

4、 在根目录创建tsconfig.json文件

1. 将TS文件编译成JS文件的详细配置
2. 这个我只做一下简单的配置,如果有细节的需要，可以自行添加

{
	"compilerOptions": {
		"modul": "ES2015", // 使用ES6版本的模块语法
		"target": "ES2015", // 将TS文件编译成ES6版本的JS文件
		"strict": true, // 开启严格检查模式开关
	}
}

5、在package.json 中配置好打包与运行命令

...
"scripts":{
	"test": "eno \"Error: no test specified\" && exit 1",
	"build": "webpack", // 配置一个打包命令
	"start": "webpack serve --open" // 设置一个命令来启动下载的webpack-dev-serve开发服务器
}
...

6、执行打包

npm run build

7、文件结构一览

node-modules
dist		存放打包后文件的目录
---------index.html   利用插件生成的html文件
---------bundle.js   打包后生成的js文件
src      
---------index.ts   入口文件
---------index.html  这个文件是作为模板生成打包后的html文件
package.json  对项目或者模块包的描述，比如项目名称，项目版本，项目执行入口文件，项目依赖等等
tsconfig.json   将TS编译成js文件的详细配置
webpack.config.js  webpack的配置文件

7、 启动

npm start 
就可以正常跑起来了，也存在热更新：项目文件发生变化，无需重新加载整个页面