webpack 打包公共库
一般而言,公共库都有这些
- 提供使用方式
- github 地址
- readme 文档
-
使用方式
- npm 平台
- npm install
- require
- import
- srcript src
-
代码案例
-
- 源码输出
- 压缩版本文件(生产环境)
- 未压缩版本文件(开发环境)
测试代码 ./src/lib.js
export default function addNumber(a, b) {
return a + b
}
先安装 webpack 打包工具
npm i -D webpack webpack-cli terser-webpack-plugin
terser-webpack-plugin
打包公共库推荐工具
配置 webpack.lib.config.js
文件
const path = require('path')
// 打包公共库工具
const terserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {
entry: {
'add-number': './src/lib.js',
'add-number.min': './src/lib.js',
},
output: {
filename: '[name].js',
library: 'addNumber', // 打包库文件
libraryTarget: 'umd', // 打包库使用的方式,一般推荐 umd
libraryExport: 'default' // 打包处理掉 'default', 可以直接使用函数名 addNumber
},
mode: 'none',
optimization: {
minimize: true,
minimizer: [
new terserWebpackPlugin({
test: /\.min\.js$/ // 判断什么文件需要压缩
})
]
}
}
根目录入口文件 index.js
'use strict'
if (process.env.NODE_ENV === 'production') {
module.exports = require('./dist/add-number.min.js')
} else {
module.exports = require('./dist/add-number.js')
}
添加命令和配置入口文件到 package.json
文件
{
"main": "index.js",
"scripts": {
"lib": "webpack --config ./webpack.lib.config.js",
},
}
执行打包命令
npm run lib
发布到 npm 仓库,记得首先设置镜像库
npm config set registry http://registry.npmjs.org
登录,输入用户名和密码
npm login
发布即可
npm publish