webpack优化利器——公共库打包

2023-12-09 03:15:55

webpack作为当下前端构建的主流工具，通过其强大的插件生态，几乎可以覆盖任何前端构建场景的需求，从我们熟悉的 sass 自动编译成 css，到图片压缩，或者使用 TypeScript 进行项目开发，再到前端代码的模块化开发，它都能够完美兼容。

本文主要介绍 webpack 如何打包一个公共库，供其他多个项目共享使用，以达到代码复用和优化加载性能的目的。webpack 将一个公共库单独打包，然后将打包出来的文件以 CDN 或者其他方式提供给其他项目使用，其他项目通过 npm 的方式安装这个公共库，并通过配置依赖的方式，让这个公共库在自己的项目中运行。

我们创建了一个简单的公共库项目，用于演示如何使用 webpack 将其打包为一个独立的 JavaScript 文件。该项目包含两个文件：index.js 和 other.js。index.js 是公共库的入口文件，other.js 是一个包含一些有用函数的模块。

接下来，我们使用 webpack 对公共库项目进行打包。在项目的根目录下创建一个 webpack.config.js 文件，该文件包含了 webpack 的配置信息。webpack.config.js 文件的内容如下：

const path = require("path");

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

在 webpack.config.js 文件中，我们指定了公共库项目的入口文件、输出目录和输出文件名。我们还指定了 library 和 libraryTarget 选项，这将告诉 webpack 如何将公共库打包为一个独立的 JavaScript 文件。

最后，我们使用 webpack 命令来打包公共库项目。在项目的根目录下运行以下命令：

webpack

webpack 将根据 webpack.config.js 文件中的配置信息对公共库项目进行打包。打包完成后，你会在项目的 dist 目录下看到一个名为 my-public-library.js 的 JavaScript 文件。这个文件就是打包好的公共库。

现在，我们可以在其他项目中使用这个公共库了。在其他项目的根目录下，运行以下命令来安装公共库：

npm install my-public-library

安装完成后，我们可以在项目的 package.json 文件中看到以下依赖项：

{
  "dependencies": {
    "my-public-library": "^1.0.0"
  }
}

接下来，我们在项目中导入公共库。在项目的 index.js 文件中，添加以下代码：

import { add, subtract } from "my-public-library";

const result = add(1, 2);
console.log(result); // 输出结果为 3

const result2 = subtract(4, 2);
console.log(result2); // 输出结果为 2