Webpack5系列（八）：库的打包

前端

2024-01-26 14:45:04

前言

上一篇讲到代码分离，本篇将介绍库的打包。

Webpack 除了能够打包项目应用以外，还可以用来打包 JS 库。当其他人安装了我们的库时，他们可能会在不同的环境中去引入，例如：

在浏览器中，可以使用<script>标签引入。
在 Node.js 中，可以使用 require() 函数引入。
在其他支持 CommonJS 的环境中，可以使用 require() 函数引入。
在支持 AMD 的环境中，可以使用 define() 函数引入。

因此，我们需要将我们的库打包成不同的格式，以满足不同环境的需求。

步骤

1. 创建一个新的项目

首先，我们需要创建一个新的项目。可以使用以下命令：

mkdir my-lib && cd my-lib
npm init -y

这将创建一个新的项目目录 my-lib，并在其中创建一个 package.json 文件。

2. 安装 Webpack

接下来，我们需要安装 Webpack。可以使用以下命令：

npm install webpack --save-dev

这将把 Webpack 安装到你的项目中。

3. 创建一个入口文件

接下来，我们需要创建一个入口文件。入口文件是 Webpack 打包的起点。我们可以创建一个 index.js 文件，并在其中写入以下内容：

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

export { add, subtract };

这个文件导出了两个函数：add() 和 subtract()。

4. 创建一个配置文件

接下来，我们需要创建一个配置文件。配置文件告诉 Webpack 如何打包我们的代码。我们可以创建一个 webpack.config.js 文件，并在其中写入以下内容：

module.exports = {
  entry: './index.js',
  output: {
    filename: 'my-lib.js',
    library: 'MyLib',
    libraryTarget: 'umd',
  },
};

这个配置文件告诉 Webpack：

入口文件是 index.js。
输出文件是 my-lib.js。
库的名称是 MyLib。
库的目标是 umd。

5. 运行 Webpack

接下来，我们可以运行 Webpack。可以使用以下命令：

npm run build

这将运行 Webpack 并生成 my-lib.js 文件。

6. 测试库

现在，我们可以测试一下我们的库。我们可以创建一个新的项目，并在其中安装我们的库。可以使用以下命令：

mkdir my-app && cd my-app
npm init -y
npm install ../my-lib --save

这将创建一个新的项目目录 my-app，并在其中安装我们的库 my-lib。

接下来，我们可以创建一个 index.html 文件，并在其中写入以下内容：

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <script src="node_modules/my-lib/dist/my-lib.js"></script>
    <script>
      console.log(MyLib.add(1, 2)); // 3
      console.log(MyLib.subtract(4, 2)); // 2
    </script>
  </body>
</html>