怎样打包一个AMD/CJS/ESM以及页面引用就可以使用的高兼容库

首先搭建webpack：

新建一个需要打包的文件：

index.js

export default swapPairs = function(head) {
    if (head === null|| head.next === null) {
        return head;
    }
    const newHead = head.next;
    head.next = swapPairs(newHead.next);
    newHead.next = head;
    return newHead;
};

配置webpack参数：

library: 'swapPairs',

libraryExport: 'default',

libraryTarget: 'umd'

这三个参数是关键，规定了三种到处方式；

const path = require('path')
module.exports = {
  //入口文件
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    publicPath: './',
    //s输出的文件名
    filename: "bundle.js",
    //输出的路径
    path: path.resolve(__dirname, "dist"),
    // 打包关健
    library: 'swapPairs',//库的名字
    libraryExport: 'default',//优化使用体验
    libraryTarget: 'umd'//通用支持设置
  },
  
  mode: "none",
}

运行：

现在我们来运行一下webpack打包一下我们的文件：

webpack

打包完之后我们看一下打包后的文件；（由于为了可读性；我们并没有启用生产模式的打包；）

打包后的文件：

由于代码比较多直接就贴上主要内容； 这离我们可以清晰的看出微博怕吃苦使用if进行环境的判断；让我们可以在不同的环境下直接到处我们的包；

到这里我们就完成了；AMD、CJS、和EMS的打包； 接下来我么来完成怎么让他接接可以在页面中引用：

直接引用的js：

一般来说我们直接引用的js分为普通的和min的压缩包：

压缩版和非压缩版的build

这时候我们就需要引入一个辅助工具来帮我们完成这个压缩的任务：terser-webpack-plugin

现在我们修改一下webpack的配置：

const path = require('path')
//用于文件的压缩处理
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  //入口文件,增加了入口；和文件名；
  entry: {
    "swapPairs-build": path.resolve(__dirname, './src/index.js'),
    "swapPairs-build.min": path.resolve(__dirname, './src/index.js'),
  },
  output: {
    publicPath: './',
    //s输出的文件名
    filename: "[name].js",
    //输出的路径
    path: path.resolve(__dirname, "dist"),
    // 打包关健
    library: 'swapPairs',//库的名字
    libraryExport: 'default',//优化使用体验
    libraryTarget: 'umd'//通用支持设置
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        include: /\.min\.js$/
      })
    ]
  },
  mode: "none",
  
}

再次开始打包，让我们查看一下打包后的文件：

现在我们的dist目录里面：有三个文件： 一个是我们第一次打包的bundle.js；还有两个是我们这次这次新打包的两个文件；

让我们来看看这三个文件：

我们可以清晰看出我们这次对文件进行压缩和非压缩同时打包的目的已经圆满成功！