一、概念

许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即 DLL 文件，放置于系统中。当我们执行某一个程序时，相应的 DLL 文件就会被调用。一个应用程序可使用多个 DLL 文件，一个 DLL 文件也可能被不同的应用程序使用，这样的 DLL 文件被称为共享 DLL 文件。

二、处理

在 webpack 中实现 DLL 主要依赖两个插件 webpack.DllReferencePlugin 和 webpack.DllPlugin

‌步骤1：创建DLL配置文件（webpack.dll.config.js）

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom', 'lodash'] // 指定要预编译的依赖
  },
  output: {
    path: path.join(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]_[hash]' // 暴露全局变量
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, 'dll/manifest.json') // 生成映射文件
    })
  ]
};

步骤2：主配置引用DLL（webpack.main.config.js）‌

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dll/manifest.json') // 读取预编译信息
    })
  ]
};

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24