目的：使用TypeScript开发项目结合webpack-dev-server的热重载，提高开发效率了解相关依赖和配置的作用准备工作1.初始项目目录结构（很简单）|_src||_索引.ts|_public|_index.html(在body标签中添加即可)2.升级到TS环境步骤：转换为npm项目：npminit-y(保存不断按Y的功夫)安装依赖：npmitypescript-D添加tsconfig.json:tsc--initfinalprojectdirectorystructure|_src||_index.ts|_public||_index.html|_tsconfig.json|_package.json验证并修改tsconfig.json，将编译后的文件输出到public目录：{..."compilerOptions":{"outDir":"./public"}...}Edit./src/index.tsconstmsg:string='ts'functiongetMsg(){return'Hello,'+msg}//更新页面内容document.body.textContent=getMsg()执行在终端中：tsc，然后在浏览器中打开public/index.html可以看到结果3.添加webpack功能第一步：安装基础依赖：npmiwebpackwebpack-cliwebpack-dev-server-Dwebpack:coredependencies,功能不冗余webpack-cli：用于在命令行运行webpackwebpack-dev-server：为webpack打包生成的资源文件提供web服务，支持热重载添加必要的目录/文件：添加配置文件webpack。根目录下的config.json在根目录下添加release目录dist安装其他依赖：ts-loaderhtml-webpack-plugincross-env-dts-loader:tsloaderforwebpack,编译ts文件html-webpack-plugin：webpack的html插件，模板html可以用来生成最终的htmlcross-env：方便切换开发环境和生产环境最终项目目录结构：|_src||_index.ts|_dist|_public||_index.html|_tsconfig.json|_package.json|_webpack.config.json步骤2：编辑webpack.config.json：constHtmlWebpackPlugin=require('html-webpack-plugin')module.exports={//resolve:设置模块的解析方式resolve:{//extensions:导入模块时没有扩展名//原来：importFilefrom'../path/to/file.js'//现在：importFilefrom'../path/to/file'extensions:['.js','.ts','.tsx'],},//module:决定如何处理不同类型的模块module:{//rules:当创建一个module，一个规则数组，用于匹配请求规则：[{//匹配所有ts文件test:/\.tsx?$/i,//使用ts-loader处理use:'ts-loader',//排除该目录下的文件exclude:/node_modules/,},],},//plugins:用于以各种方式自定义构建过程plugins:[//使用目标模板生成最终的htmlnewHtmlWebpackPlugin({template:'./public/index.html',}),],}编辑public/index.html并删除脚本标签，因为webpack会自动构建时自动插入相关标签。在package.json中添加添加启动服务的脚本：{..."script":{"dev":"cross-envNODE_ENV=developmentwebpack-dev-server--configwebpack.config.js"}...}验证执行在终端：numrundev，启动服务打开浏览器：127.0.0.1:8080，可以看到页面修改./src/index.ts中msg的值，然后保存，可以看到浏览器中的页面会自动刷新
