经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » webpack » 查看文章
使用webpack打包ts代码的实现
来源：jb51　　时间：2022/6/27 9:03:01　　对本文有异议

使用 webpack 打包

生成 package.json

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。在我们的项目中要使用 webpack 首先应该初始化，生成的默认的 package.json，执行 npm init -y 后会在项目根目录下生成 package.json（其中 -y 是直接略过所有问答，直接都 yes）

在这里插入图片描述

安装 cnpm

接下来需要安装 webpack 所需依赖，我们可以使用 npm 或 cnpm 安装。这里说点题外话。npm 作为包管理器，由于服务器不在国内所以有的时候速度会慢一点，所以我们来安装淘宝团队的 cnpm，这个就是 npm 在国内的镜像，执行以下命令来安装 cnpm

  1. npm install cnpm -g --registry=https://registry.npm.taobao.org

使用 cnpm -v来检查是否安装成功

在这里插入图片描述

安装 webpack 相关

  1. cnpm i -D webpack webpack-cli typescript ts-loader

i 是 install 的简写
-D 表示安装到开发环境，也就是安装并将依赖信息写在 package.json 中的 devDependencies中，等同于 --save-dev
webpack 安装打包工具的核心代码
webpack-cli webpack 命令行工具
typescript ts的核心包
ts-loader 必须安装这个才能让 ts 在 webpack 中使用

执行命令后，查看 package.json，多了 devDependencies 节点，说明安装成功啦

在这里插入图片描述

编写 webpack 配置文件

新建一个 webpack.config.js 文件到根目录

  1. //引入一个包
  2. const path = require('path')
  3.  
  4. //webpack 中的所有配置都应该写在 module.exports 中
  5. module.exports = {
  6.     //指定入口文件
  7.     entry: "./src/index.ts",
  8.     //指定打包文件所在目录
  9.     output: {
  10.         //指定打包文件的目录
  11.         path: path.resolve(__dirname, 'dist'),
  12.         //打包后文件的名字
  13.         filename: "bundle.js"
  14.     },
  15.     //指定webpack打包时使用的模块
  16.     module: {
  17.         //指定要加载的规则
  18.         rules: [
  19.             {
  20.                 //test 指定规则生效的文件，以下匹配以 ts 结尾的文件
  21.                 test:/\.ts$/,
  22.                 //要使用的loader，用 ts-loader 处理以 ts 结尾的文件
  23.                 use: 'ts-loader',
  24.                 //要排除的文件
  25.                 exclude: /node_modules/
  26.             }
  27.         ]
  28.     }
  29. };

创建 tsconfig.json

上节我们已经讲了，先写这些：

  1. {
  2.   "compilerOptions": {
  3.     "module": "ES2015",
  4.     "target": "ES2015",
  5.     "strict": true
  6.   }
  7. }

修改 package.json

  1.  "build": "webpack"

增加位置如下：

在这里插入图片描述

使用webpack打包

命令：npm run build

在 webpack.config.js 中我们指定了入口文件为 index.ts，我们在里边随便编写一些内容

index.ts

  1. function sum(a:number,b:number):number{
  2.     return a+b;
  3. }
  4.  
  5. console.log(sum(11,22));

在 webpack.config.js 中我们指定了打包文件的目录为 dist，打包后的文件名是 bundle.js，所以执行命令npm run build后就使用 webpack 进行了打包，结果如下：

在这里插入图片描述

到此为止，我们就实现了最简单的使用 webpack 打包的功能

安装插件

html-webpack-plugin

① 安装插件
执行 cnpm i -D html-webpack-plugin
html-webpack-plugin 帮助我们自动生成 html 文件

② 引入插件
webpack.config.js 中引入插件

  1. //引入一个包
  2. ......
  3. //引入插件
  4. const HTMLWebpackPlugin = require("html-webpack-plugin")
  5.  
  6. //webpack 中的所有配置都应该写在 module.exports 中
  7. module.exports = {
  8.     ......
  9.  
  10.     //配置webpack插件
  11.     plugins: [
  12.         new HTMLWebpackPlugin(),
  13.     ]
  14. };

③打包
先执行 npm run build

这样目录下就生成了 html 文件

在这里插入图片描述

我们可以自定义标题或其他一些内容

  1. 	//配置webpack插件
  2.     plugins: [
  3.         new HTMLWebpackPlugin({
  4.             title: "自定义标题"
  5.         }),
  6.     ]

还可以设置一个网页模板，我们可以在 src 下新建一个 index.html 做为模板

在这里插入图片描述

然后在 webpack.config.js 中将其设置为模板

  1. 	plugins: [
  2.         new HTMLWebpackPlugin({
  3.             template: "./src/index.html"
  4.         }),
  5.     ]

再次运行 npm run build 生成的网页就是根据刚才写好的模板生成的

在这里插入图片描述

webpack-dev-server

①、执行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 ，多输出一行文字，右侧浏览器也会自动输出

在这里插入图片描述

clear-webpack-plugin

这个插件的作用是每次编译会先清空编译文件夹下的文件，再生成，这样就保证了都是最新文件

①、安装

  1. cnpm i -D clean-webpack-plugin

②、引入、配置

  1. //引入clean插件
  2. const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  3.  
  4.  //配置webpack插件
  5.     plugins: [
  6.         new CleanWebpackPlugin(),
  7.         ......
  8.     ],

babel

babel 用来解决兼容性问题

①、安装

  1. cnpm i -D @babel/core @babel/preset-env babel-loader core-js

②、配置
修改 webpack.config.js

  1. ......
  2.  
  3. //webpack 中的所有配置都应该写在 module.exports 中
  4. module.exports = {
  5.     //指定入口文件
  6.     entry: "./src/index.ts",
  7.     //指定打包文件所在目录
  8.     output: {
  9.         ......
  10.         //告诉webpack不使用箭头函数
  11.         environment: {
  12.             arrowFunction: false
  13.         }
  14.     },
  15.     //指定webpack打包时使用的模块
  16.     module: {
  17.         //指定要加载的规则
  18.         rules: [
  19.             {
  20.                 //test 指定规则生效的文件，以下匹配以 ts 结尾的文件
  21.                 test:/\.ts$/,
  22.                 //要使用的loader，用 ts-loader 处理以 ts 结尾的文件
  23.                 use: [
  24.                     //配置babel
  25.                     {
  26.                         //指定加载器
  27.                         loader:'babel-loader',
  28.                         //设置 babel
  29.                         options: {
  30.                             //设置预定义的环境
  31.                             presets:[
  32.                                 //指定环境插件
  33.                                 '@babel/preset-env',
  34.                                 //配置信息
  35.                                 {
  36.                                     //要兼容的目标浏览器
  37.                                     targets:{
  38.                                         "chrome":88
  39.                                     },
  40.                                     //指定corejs版本
  41.                                     "corejs":"3",
  42.                                     //使用corejs的方式 usage表示按需加载
  43.                                     "useBuiltIns":"usage",
  44.                                 }
  45.                             ]
  46.                         }
  47.                     },
  48.                     'ts-loader'
  49.                 ],
  50.                 //要排除的文件
  51.                 exclude: /node_modules/
  52.             }
  53.         ]
  54.     },
  55.  
  56.     ......
  57. };

加载器的顺序是从后往前执行，所以先用 ts-loader 将 ts 转为 js，然后使用 babel-loader 将新版本的 js 转换为 旧版本的 js

模块问题

新建 m1.ts 暴露一个 hi

在这里插入图片描述

index.ts 中引入 m1 并打印 hi

在这里插入图片描述

执行 npm run build 会报错：

在这里插入图片描述

这时我们需要修改 webpack.config.js 中配置，增加

  1.  resolve: {
  2.         extensions: ['.ts','.js']
  3.     }

Resolve 配置 webpack 如何寻找模块对应的文件，在导入语句没带文件后缀时，webpack 会自动带上后缀去尝试访问文件是否存在。resolve.extensions 用于配置在尝试过程中用到的后缀列表

到此这篇关于使用webpack打包ts代码的实现的文章就介绍到这了,更多相关webpack打包ts内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

webpack热门文章

  • 最新 umi4-max 如何使用 webpack5 联邦模块
  • 使用webpack配置react-hot-loader热加载局部更新
  • vue-cli3+ts+webpack实现多入口多出口功能
  • JS逆向实战21——某查查webpack密码加密
  • 使用webpack打包ts代码的实现
  • 详解webpack之图片引入-增强的file-loader：url-loader
  • webpack的移动端适配方案小结
  • webpack拆分压缩css并以link导入的操作步骤
  • 详解Webpack loader 之 file-loader
  • 详解webpack+ES6+Sass搭建多页面应用

    • webpack推荐文章

  • Webpack 学习笔记
  • 最新 umi4-max 如何使用 webpack5 联邦模块
  • 自学 TypeScript 第三天 使用webpack打包 TS 代码
  • 使用webpack打包ts代码的实现
  • vue-cli webpack配置文件分析
  • webpack-mvc 传统多页面组件化开发详解
  • 使用 Webpack 分离数据的正确方法
  • 新手快速上手webpack4打包工具的使用详解
  • 一次Webpack配置文件的分离实战记录
  • 详解Webpack loader 之 file-loader

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号