凭实力晋级“国民打包神器”！webpack打包组件和基础库

2023-12-10 12:36:51

webpack作为前端工程中的必备工具，除了可以用来打包应用，也能轻松打包js库。我们以构建一个大整数加法库为例，一步步演示webpack在js库打包中的妙用。

创建项目目录

mkdir big-integer-sum
cd big-integer-sum

安装webpack
```
npm install webpack --save-dev
```

编写库代码

在src目录下创建index.js文件，作为我们的库文件：

function sum(a, b) {
  // 大整数加法算法
  return a + b;
}

module.exports = sum;

配置webpack

在项目根目录下创建webpack.config.js文件，这是webpack的配置文件：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'big-integer-sum.js',
    library: 'bigIntegerSum',
    libraryTarget: 'umd',
  },
};

打包库文件
```
npm run build
```
执行完成后，你会在dist目录下看到打包好的big-integer-sum.js文件。

测试库文件

在test目录下创建index.html文件，用于测试库文件：

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <script src="dist/big-integer-sum.js"></script>
    <script>
      console.log(bigIntegerSum(12345678901234567890n, 98765432109876543210n));
    </script>
  </body>
</html>