这次的目标是使用typeScript实现一个helloworld，里面包含了webpack配置项的详解（build目录下每个js文件都有注释）主要是搭建webpack+typeScript环境，后面的代码会基于本项目开发gitee项目地址1.准备环境在电脑上安装node环境（http://nodejs.cn/），可以直接通过...全局安装typeScript，全局安装。您可以在此处访问任何项目中的安装编辑器。使用vscode2.命名新建项目文件夹：在文件中输入typeScriptDemo，并初始化项目。默认的配置项是yes，所以我选择了-y来运行命令npminit-y。这时typeScriptDemo文件夹下多了一个包.json。这是typescript初始化项目的配置文件。运行命令tsc-h查看它支持哪些命令。运行命令tsc-init，可以看到生成了tsconfig.json。这是ts的配置文件。在src目录下新建一个src目录接下来新建一个index.ts//index.ts//这一行声明了一个string类型的变量hello，并给它赋值"helloTypeScript"lethello:string="helloTypeScript";运行编译命令//进入对应的目录cdsrc//运行编译命令tscindex.ts可以看到和index.ts同级目录下多了一个index.js。接下来配置我们的构建工具，使用webpack，不知道webpack也没关系，我们只是为了运行ts代码，webpack只是一个工具。安装三个工具包，执行命令npmiwebpack-cliwebpack-dev-server-D配置webpack的时候需要区分开发环境和生产环境，因为两个环境的配置不一样，我们需要做不同的事情。为了项目的可维护性，我们需要分别编写开发环境配置、生产环境配置和公共配置，最后通过插件进行合并。在src同级目录下新建build目录存放所有配置文件webpack.base.config.js为公共环境配置webpack.config.js所有配置文件入口webpack.dev.config.js开发环境配置webpack.pro.config.js生产环境配置完成。这里太复杂了。我直接放源码。源码中写的注释大概意思是：在webpack.base.config.js中引入了typescript，所以接下来就是安装typescript和ts-loader、html-webpack-plugin等插件。详细请看下面重要步骤：安装typescript和ts-loader运行命令：npmits-loadertypescript-DI我这里安装的时候遇到问题：我的项??目也叫typescript，所以无法正常安装typescript包.注意不要写错别字！安装html-webpack-plugin和clean-webpack-pluginnpmihtml-webpack-plugin-Dnpmiclean-webpack-plugin-D编写html模板文件：在src目录下新建tpl目录，新建index.html。html文件，修改title为typeScript，在body中新建一个div类并命名为app并安装webpack-merge。它的作用是将两个webpack文件合并。webpack.config.js中所有配置文件的入口都会使用npmiwebpack-merge-D修改npm脚本打开package.json文件。首先，改变它的入口'main':'./src/index.ts'写命令"scripts"来启动开发环境：{"start":"webpack-dev-server--mode=development--config。/build/webpack.config.js"}，打开浏览器访问本地8080端口（默认8080开启）在index.ts中，添加一行document.querySelectorAll('.app')[0].innerHTML=hello;编写脚本搭建生产环境，指定参数设置当前环境变量--mode=production指定配置文件--config./build/webpack.config.js"scripts":{"build":"webpack--mode=production--config./build/webpack.config.js"}，运行npmrunbuild，如果打包成功，会生成一个dist文件，你'重做
