【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