从0到1：用 webpack 打包包含动态加载的类库

当然，以下是关于“Webpack 打包含动态加载的类库”的专业文章：

前言

在编写库的时候，我们有时候会希望按需加载某些依赖，例如如果代码的运行环境不支持某些功能的话，就加载相关的 Polyfill。webpack 作为当前最流行的打包工具，早已支持动态加载的功能了。本文将讨论一种用 webpack 打包包含动态加载的类库的方法。

创建项目

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

mkdir my-library
cd my-library
npm init -y

安装 webpack

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

npm install webpack webpack-cli --save-dev

配置 webpack

在项目的根目录下，创建一个名为 webpack.config.js 的文件。在这个文件中，我们将配置 webpack 的选项。

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

在这个配置中，我们指定了项目的入口文件是 ./src/index.js，输出目录是 dist，输出文件名是 index.js，库的名称是 my-library，库的目标是 umd。

编写代码

在项目的 src 目录下，创建一个名为 index.js 的文件。在这个文件中，我们将编写我们的代码。

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

export default add;

在这个文件中，我们定义了一个名为 add 的函数，该函数接受两个参数并返回这两个参数的和。然后，我们将这个函数导出。

打包项目

现在，我们可以使用以下命令来打包项目：

npm run build

这将把我们的代码打包成一个名为 index.js 的文件，并将其放在 dist 目录中。

使用项目

现在，我们可以使用以下命令来安装我们的项目：

npm install my-library --save

然后，我们就可以在我们的项目中使用 my-library 了。

总结

在本文中，我们讨论了一种用 webpack 打包包含动态加载的类库的方法。我们首先创建了一个新的 webpack 项目，然后安装了 webpack。接下来，我们配置了 webpack 的选项，编写了我们的代码，并打包了项目。最后，我们安装了我们的项目并使用了它。