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 = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  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: 'default',
  },
  // 压缩文件插件
  optimization: {
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
        include: /\.min\.js$/,
      }),
    ],
  },
};

3.运行：npm run build 即可打包你的es6模块代码，打包为 my-utils.js 和 my-utils.min.js，