webpack打包你的es6模块工具库

1.package.json添加webpack

{"name": "my-utils","version": "1.0.0","description": "打包一个es6模块化的工具库","author": "your name","main": "./src/index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack",},"license": "MIT","dependencies": {"webpack": "^5.64.1","webpack-cli": "^4.9.1","uglifyjs-webpack-plugin": "^2.2.0"},"devDependencies": {},
}

2.新建webpack.config.js

const path &＃61; require("path");
const UglifyJsPlugin &＃61; require("uglifyjs-webpack-plugin");module.exports &＃61; {mode: "development",entry: {// 压缩文件入口"my-utils": path.resolve(__dirname, "./src/index.js"),"my-utils.min": path.resolve(__dirname, "./src/index.js"),},devtool: "source-map",output: {filename: "[name].js",path: path.resolve(__dirname, "dist"),library: "MyUtils", // 工具使用的变量名libraryTarget: "umd",libraryExport: &＃39;default&＃39;,},// 压缩文件插件optimization: {minimize: true,minimizer: [new UglifyJsPlugin({include: /\.min\.js$/,}),],},
};


3.运行&＃xff1a;npm run build 即可打包你的es6模块代码&＃xff0c;打包为 my-utils.js 和 my-utils.min.js&＃xff0c;