用最易懂的方式理解webpack dll配置与原理，帮你省下无数踩坑时间

前端

2023-10-31 21:52:23

围观webpack dll，原来最复杂的部分是它的原理

我们曾见过无数次 webpack4 优化文章，其中一个热词便是 dll 动态链接库。它的复杂配置，令许多初学者印象深刻。作为一名学习者，我来探索 webpack dll 配置，以便理解其原理。

webpack dll 配置总被认为是最复杂的配置。但实际上，它并不是如此。难就难在，我们很难找到一个通俗易懂的原理解释。

当需要构建一个复杂的 Web 项目时，Webpack dll 是一个非常有用的工具。它可以通过将常用的模块预先打包成一个单独的库来提高构建速度。这可以减少webpack在构建应用程序时需要处理的模块数量，从而缩短构建时间。

webpack dll 的基本原理是，它会将应用程序中经常使用的模块打包成一个单独的库。这个库通常称为“dll”。dll 库可以存储在服务器上，以便应用程序在需要时下载和使用。

webpack dll 的配置过程包括以下几个步骤：

创建一个新的 webpack 配置文件。
将要打包成 dll 的模块添加到配置文件中。
将 dll 库的名称添加到配置文件中。
将 dll 库的输出目录添加到配置文件中。
运行 webpack 命令来构建 dll 库。

一旦 dll 库被构建，就可以将其存储在服务器上。应用程序需要时，就可以下载和使用它。这可以减少应用程序的构建时间，并提高其性能。

webpack dll 是一个非常强大的工具，可以帮助我们提高应用程序的构建速度和性能。但是，它的配置过程可能有点复杂。为了帮助大家更好地理解和使用 webpack dll，我将提供一个简单的示例。

在这个示例中，我们将使用 webpack dll 来打包 jQuery 库。首先，我们需要创建一个新的 webpack 配置文件。我们将这个配置文件命名为“webpack.dll.config.js”。

const webpack = require('webpack');

module.exports = {
  entry: {
    jquery: ['jquery']
  },
  output: {
    filename: 'jquery.dll.js',
    library: 'jquery',
    libraryTarget: 'umd'
  },
  plugins: [
    new webpack.DllPlugin({
      name: 'jquery',
      path: 'manifest.json'
    })
  ]
};