如何使用webpack打包ts代码

今天小编给大家分享一下如何使用webpack打包ts代码的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。在我们的项目中要使用 webpack 首先应该初始化，生成的免费云主机域名默认的 package.json，执行 npm init -y 后会在项目根目录下生成 package.json（其中 -y 是直接略过所有问答，直接都 yes）接下来需要安装 webpack 所需依赖，我们可以使用 npm 或 cnpm 安装。这里说点题外话。npm 作为包管理器，由于服务器不在国内所以有的时候速度会慢一点，所以我们来安装淘宝团队的 cnpm，这个就是 npm 在国内的镜像，执行以下命令来安装 cnpm使用 cnpm -v来检查是否安装成功i 是 install 的简写
-D 表示安装到开发环境，也就是安装并将依赖信息写在 package.json 中的 devDependencies中，等同于 –save-dev
webpack 安装打包工具的核心代码
webpack-cli webpack 命令行工具
typescript ts的核心包
ts-loader 必须安装这个才能让 ts 在 webpack 中使用执行命令后，查看 package.json，多了 devDependencies 节点，说明安装成功啦新建一个 webpack.config.js 文件到根目录上节我们已经讲了，先写这些：增加位置如下：命令：npm run build在 webpack.config.js 中我们指定了入口文件为 index.ts，我们在里边随便编写一些内容index.ts在 webpack.config.js 中我们指定了打包文件的目录为 dist，打包后的文件名是 bundle.js，所以执行命令npm run build后就使用 webpack 进行了打包，结果如下：到此为止，我们就实现了最简单的使用 webpack 打包的功能① 安装插件
执行 cnpm i -D html-webpack-plugin
html-webpack-plugin 帮助我们自动生成 html 文件② 引入插件
webpack.config.js 中引入插件③打包
先执行 npm run build这样目录下就生成了 html 文件我们可以自定义标题或其他一些内容还可以设置一个网页模板，我们可以在 src 下新建一个 index.html 做为模板然后在 webpack.config.js 中将其设置为模板再次运行 npm run build 生成的网页就是根据刚才写好的模板生成的①、执行cnpm i -D webpack-dev-server
②、在 pages.json 中 scripts 节点下增加 "start": "webpack serve --open"意思是启动 webpack 服务器，这样我们刚才生成的 html 会用默认浏览器打开③、运行
直接点击上边截图的运行三角形，或者执行 npm start如果报错 The mode option has not been set......解决办法：
在 webpack.config.js 中根节点下增加 mode: 'development'（如果还处在上次命令，可以按 ctrl+c 终止命令）再次执行 npm start 即可打开默认浏览器这个网页是实时更新的，我们修改 index.ts ，多输出一行文字，右侧浏览器也会自动输出这个插件的作用是每次编译会先清空编译文件夹下的文件，再生成，这样就保证了都是最新文件①、安装②、引入、配置babel 用来解决兼容性问题①、安装②、配置
修改 webpack.config.js加载器的顺序是从后往前执行，所以先用 ts-loader 将 ts 转为 js，然后使用 babel-loader 将新版本的 js 转换为 旧版本的 js新建 m1.ts 暴露一个 hiindex.ts 中引入 m1 并打印 hi执行 npm run build 会报错：这时我们需要修改 webpack.config.js 中配置，增加Resolve 配置 webpack 如何寻找模块对应的文件，在导入语句没带文件后缀时，webpack 会自动带上后缀去尝试访问文件是否存在。resolve.extensions 用于配置在尝试过程中用到的后缀列表以上就是“如何使用webpack打包ts代码”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注百云主机行业资讯频道。

相关推荐: vue如何引用public的js文件

这篇文章主免费云主机域名要介绍“vue如何引用public的js文件”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue如何引用public的js文件”文章能帮助大家解决问题。1:创建公共JS(utils.js) sr…