简介

    webpack 除了可以用来打包应用，也可以用来打包js库

加法库打包

目标：实现一个大整数加法库的打包
    1. 需要打包压缩版和非压缩版本
    2. 支持AMD/CJS/ESM 模块引用
库的目录结构和打包要求
    打包输出的库名称：
        未压缩版：large-number.js
        压缩版：large-number.min.js

            + |- /dist
            + |-- large-number.js
            + |-- large-number.min.j
            + |- webpack.config.js
            + |- package.json
            + |- index.js
            + |- /src
            + |-- index.js
支持的使用方式⽀持 ES module
    ⽀持 ES module
    import * as largeNumber from 'large-number';
    // ...
    largeNumber.add('999', '1');

    ⽀持 CJS
    const largeNumbers = require('large-number');
    // ...
    largeNumber.add('999', '1');

    ⽀持 AMD
    require(['large-number'], function (large-number) {
    // ...
    largeNumber.add('999', '1');
    });
如何将库暴露出去
    library: 指定库的全局变量
    libraryTarget: ⽀持库引⼊的⽅式

    module.exports = {
        mode: "production",
        entry: {
        "large-number": "./src/index.js",
        "large-number.min": "./src/index.js"
        },
        output: {
        filename: "[name].js",
        library: "largeNumber",
        libraryExport: "default",
        libraryTarget: "umd"
        }
    };
如何指对.min 压缩
    通过 include 设置只压缩 min.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"
        },
        optimization: {
            minimize: true,
            minimizer: [
            new TerserPlugin({
            include: /\.min\.js$/,
             }),
            ],
        }
    };
src - 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;
            }
            // 0 + ''
            ret = sum + ret;
        }

        if (carry) {
            ret = carry + ret;
        }

        return ret;
    }

    // add('999', '1');
    // add('1', '999');
    // add('123', '321');
webpack.config.js
    const TerserPlugin = require('terser-webpack-plugin');

    module.exports = {
        entry: {
            'large-number': './src/index.js',
            'large-number.min': './src/index.js'
        },
        output: {
            filename: '[name].js',
            library: 'largeNumber',
            libraryTarget: 'umd',
            libraryExport: 'default'
        },
        mode: 'none',
        optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    include: /\.min\.js$/,
                })
            ]
        }
        
    }
package.json
    {
        "name": "large-number",
        "version": "1.0.1",
        "description": "加法打包",
        "main": "index.js",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "build": "webpack",
            "prepublish": "webpack"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "devDependencies": {
            "terser-webpack-plugin": "^1.3.0",
            "webpack": "^4.34.0",
            "webpack-cli": "^3.3.4"
        }
    }
设置入口文件 index.js
    package.json 的 main 字段为 index.js

    index.js: 
        if (process.env.NODE_ENV === 'production') {
            module.exports = require('./dist/large-number.min.js');
        } else {
            module.exports = require('./dist/large-number.js');
        }