webpack实现一个大整数加法库的打包

实现要求：

• 需要打包压缩版和非压缩版
• 支持 AMD/CJS/ESM 模块引入

将库暴露出去：

• library: 指定库的全局变量
• libraryTarget: 支持库的引入方式

首先创建初始目录结构

在index.js中实现大整数加法函数

export default function add(a, b) {
    let i = a.length - 1
    let j = b.length - 1

    let carry = 0
    let ret = ''
    while (i >= 0 || j >= 0) {
        let x = 0
        let y = 0
        let sum

        if (i >= 0) {
            x = a[i] - '0'
            i--
        }
        if (j >= 0) {
            y = b[j] - '0'
            j--
        }
        sum = x + y + carry
        if (sum >= 10) {
            carry = 1
            sum -= 10
        } else {
            carry = 0
        }
        ret = sum + ret
    }
    if (carry) {
        ret = carry + ret
    }
    return ret
}

编写webpack配置 webpack.config.js

module.exports = {
    entry: {
        'large-number': './src/index.js',
        'large-number-min': './src/index.js'
    }, 
    output: {
        filename: '[name].js',
        library: 'largeNumber',
        libraryTarget: 'umd',
        libraryExport: 'default'
    }
}

现在打包看一下

可以看到large-number和large-number-min都打包出来了

此时的large-number也被压缩了，我们的要求是针对开发版不压缩，非开发版压缩。

首先我们把mode设置成none，把所有的压缩都去掉 然后在optimization中通过include设置只压缩min.js结尾的文件

设置完后的webpack.config.js

module.exports = {
    mode: 'none',
    entry: {
        'large-number': './src/index.js',
        'large-number-min': './src/index.js'
    }, 
    output: {
        filename: '[name].js',
        library: 'largeNumber',
        libraryTarget: 'umd',
        libraryExport: 'default'
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                include: /\.min\.js$/,
            })
        ]
    }
}

值得说明的是这里的压缩插件使用的是TerserPlugin，使用这个有个好处就是代码里可以有es6的语法，这里如果使用uglifyPlugin压缩时候碰到es6的语法会报错，但是uglifyPlugin3.0版本已经支持es6语法。

再次构建

从两个文件大小就可以看出min是经过压缩的，large-number是没有压缩的

接下来设置入口文件

生产阶段使用压缩版本，其他阶段使用未压缩的版本