当前位置: 首页 > news >正文

【10分钟速通webpack,全流程打包,编译,发包,全干货,附代码 】

需求

后端有个nodejs 基础库,用typescript编写,需要发包到代码仓库上,被其它业务引入。这其中就涉及了: 编译, 打包,发包。

工作流速览

前提依赖

webpack主体

npm install --save-dev  webpack webpack-cli

webpack插件

npm install --save-dev webpack-node-externals  ts-loader 

编译相关

npm instsall --save-dev typescript

基础示例

这个是工作流,可以看到从最初的源文件,一直到发包的打包文件的转换过程。这其中涉及到3个配置文件

  • package.json 用于包依赖管理(装依赖 和 发包)
  • webpackage.config.js 用于触发编译(typescript编译) 和 打包(把编译后的文件 打到一个文件里
  • tsconfig.json 用于编译使用,将typescript文件编译成JavaScript文件。

tsconfig.json

{"compilerOptions": {"baseUrl": "./","declaration": true,"allowSyntheticDefaultImports": true,"skipLibCheck": true,"emitDecoratorMetadata": true,"resolveJsonModule": true,"esModuleInterop": true,"experimentalDecorators": true,"lib": ["es2015", "es2016", "es2017.object", "es2020.Promise", "esnext.asynciterable", "dom"],"module": "nodeNext","moduleResolution": "nodeNext","noImplicitAny": false,"outDir": "./dist","composite": true,"sourceMap": true,"strict": true,"strictPropertyInitialization": false,"target": "es2017","types": ["jest"],// "types": ["node"],"typeRoots": ["node_modules/@types"],},"compileOnSave": true,"include": ["src/**/*", "index.ts"],"exclude": ["node_modules/**/*", "**/*.d.ts", "test"],
}

webpack.config.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');module.exports = {entry: './src/index.ts', // 指定入口文件为 src 目录下的 index.tstarget: 'node', // 指定打包目标为Node环境externals: [nodeExternals()], // 排除 node_modules 中的模块devtool: 'source-map',module: {rules: [{test: /\\.ts$/,use: 'ts-loader',exclude: /node_modules/,},],},resolve: {extensions: ['.tsx', '.ts', '.js'],preferRelative: true,},output: {filename: 'bundle.js', // 输出文件名path: path.resolve(__dirname, 'dist'), // 输出目录设置为根目录下的 dist 文件夹libraryTarget: "commonjs" },
};
  • target: 指定运行时环境,这里是在后端node环境运行,填写node。
  • exclude: 排除 node_module等不需要打包的文件。
  • debug: source map, 关联打包文件和源文件,以开启 vscode等IDE debug时的断点。
  • 编译:会用tsconfig.json文件进行编译

编译后打包

npx webpack

执行webpack的过程,会先触发编译下,然后打包

解释结果

编制结果在 dist文件夹里,可以查看里面内容如下,ls ./dist

bundle.js :就是webpack打包的结果。
bundle.js.map :用于debug的文件,source map参数开始后,关联bundle.js和源码的文件。
index.d.ts :声明文件,typescript 编译index.ts时,产生的声明文件,src 里包含了其它*.ts的声明文件。

发包

package.json

最后,如果要发包注意下 package.json, main的入口是打包的文件生成的地方,

{"name": "nodejs-webpack-demo","version": "1.0.0","description": "","main": "./dist/bundle.js","types": "./dist/index.d.ts", "scripts": {"test": "echo \\"Error: no test specified\\" && exit 1"},"author": "","license": "ISC","devDependencies": {"ts-loader": "^9.5.1","webpack": "^5.92.1","webpack-cli": "^5.1.4","webpack-node-externals": "^3.0.0"},"dependencies": {"mongoose": "^8.4.4"}
}

同时注意下,webpack.config.js里面的output中的libraryTarget,需要根据不同的运行环境,输出为指定格式,否则无法引入使用。

发包命令,用npm发包,进入到包的目录下

// 如果需要使用私有仓库
npm config set registry <https://your-registry.com>
// 登录
npm login
// 发包
npm publish

或是用 yarn ,注意这个需要在 包的外层执行 ,假设你的包文件是common,则需要在路径…/common, 即包文件的外层执行

yarn publish --registry=http://127.0.0.1:8081/repository/my-npm-repo/ --new-version 1.0.0 common

代码参考

代码地址 :https://github.com/Wunan777/webpack-demo

http://www.lryc.cn/news/386948.html

相关文章:

  • 设计模式深入解析与实例应用
  • 服务器数据恢复—异常断电导致RAID6阵列中磁盘出现坏扇区的数据恢复案例
  • 前端工程化08-新的包管理工具pnpm
  • 章十九、JavaVUE —— 框架、指令、声明周期、Vue-cli、组件路由、Element
  • 正则表达式阅读理解
  • Apache Calcite Linq4j学习
  • FPGA SATA高速存储设计
  • MySQL----为什么选择使用MySQL
  • 01.音视频小白系统入门(新专栏)
  • C++:enum枚举共用体union
  • 动手学深度学习(Pytorch版)代码实践 -计算机视觉-47转置卷积
  • LinkedIn被封原因和解封方法
  • redis sentinel 部署
  • spring boot (shiro)+ websocket测试连接不上的简单检测处理
  • Jenkins - Python 虚拟环境
  • 每日一道算法题 面试题 08.08. 有重复字符串的排列组合
  • Apache Kylin资源管理全指南:优化你的大数据架构
  • 计算机网络微课堂(湖科大教书匠)TCP部分
  • C++ 字符串介绍
  • [Cloud Networking] BGP
  • Typora failed to export as pdf. undefined
  • windows 10 安装tcping 使用教程
  • [leetcode hot 150]第一百二十二题,买卖股票的最佳时机Ⅱ
  • openstack Y版在ubuntu22.04上不能创建超过8个cpu的虚拟机问题解决
  • 全国31省细分产品出口数据集(2002-2022年)
  • 1,Windows-本地Linux 系统(WSL)
  • K8S 角色/组件及部署方式的简单概述
  • 堆【模板】小根堆堆【模板】大根堆(回)
  • 【JavaScript】JavaScript简介
  • pg_rman:备份和恢复管理工具#postgresql培训