上篇文章讲了如何使用webpack对ts进行编译打包生成js代码。那么我们最终的js代码是要在浏览器中运行的,如何运行用webpack打包好的js代码是本篇文章的中心。
安装依赖插件 html-webpack-plugin
cnpm i -D html-webpack-plugin
配置插件
在webpack.config.js中引入并配置好插件
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/98a88c33885d4e548dc116fb8b0abc30.png
安装热更新插件
安装
cnpm i -D webpack-dev-server
package.json的配置
webpack.config.js的配置
编译运行
在src/indexn.ts中写如下代码
function sum(a: number, b: number): number{
return a+b
}
console.log(sum(5,20));
编译
npm run build
运行
npm start
至此,就可以完成将ts编译后生成的js文件拿到浏览器中运行啦!
补充
如果此时新开一个m1文件
//m1.ts
export const hi ='你好'
在index.ts中引入m1
再打包会报错
此时需要再次在webpack中配置
即可大功告成!