如何在浏览器运行用webpack打包好的js代码

上篇文章讲了如何使用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中配置

即可大功告成！