Webpack 中 DllPlugin 的使用详解-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是现代前端开发中最常用的构建工具之一。它可以将多个 JavaScript 文件打包成一个或多个 bundle，以便于在浏览器中加载和执行。然而，当我们的项目变得越来越大，构建时间也会变得越来越长，这会影响我们的开发效率。为了解决这个问题，Webpack 提供了 DllPlugin 插件，可以将一些公共的代码提前打包成一个独立的文件，以便于在后续的构建中复用。

DllPlugin 的基本用法

DllPlugin 插件的基本用法非常简单，我们只需要在 webpack 配置文件中添加以下代码即可：

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, 'dist/[name].json')
    })
  ]
};

其中，name 是该 Dll 文件的名字，path 是该 Dll 文件的输出路径。执行 webpack 命令后，Webpack 会生成一个名为 [name].json 的文件，该文件包含了该 Dll 文件中所有的模块信息。

接下来，我们需要在我们的主要配置文件中使用该 Dll 文件。我们可以使用 DllReferencePlugin 插件来实现这一点：

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dist/[name].json')
    })
  ]
};

注意，我们需要将 manifest 属性设置为我们刚刚生成的 [name].json 文件的路径。这样，Webpack 在构建时就会先加载该文件，以便于后续的构建中复用其中的模块。

DllPlugin 的高级用法

除了基本用法之外，DllPlugin 还提供了一些高级用法，可以进一步优化我们的构建效率。

scope

scope 属性用于指定该 Dll 文件中所有模块的命名空间。例如，我们可以将 scope 设置为 myLibrary，那么该 Dll 文件中所有模块的名称都将以 myLibrary. 作为前缀。这样可以避免命名冲突，同时也方便了模块的使用。

new webpack.DllPlugin({
  name: '[name]',
  path: path.resolve(__dirname, 'dist/[name].json'),
  scope: 'myLibrary'
})

sourceType

sourceType 属性用于指定该 Dll 文件中所有模块的类型。默认情况下，Dll 文件中的模块是 CommonJS 类型的，即使用 require 来导入。但是，如果我们的项目中使用了 ES6 模块，那么我们可以将 sourceType 设置为 module，以便于在后续的构建中使用 ES6 模块。

new webpack.DllPlugin({
  name: '[name]',
  path: path.resolve(__dirname, 'dist/[name].json'),
  sourceType: 'module'
})

context

context 属性用于指定该 Dll 文件中所有模块的根路径。例如，我们可以将 context 设置为项目的根路径，那么该 Dll 文件中所有模块的路径都将以项目的根路径作为相对路径。

new webpack.DllPlugin({
  name: '[name]',
  path: path.resolve(__dirname, 'dist/[name].json'),
  context: __dirname
})

示例代码

下面是一个完整的 Webpack 配置文件，其中包含了 DllPlugin 的基本用法和高级用法的示例代码：

// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]',
    libraryTarget: 'umd'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, 'dist/[name].json')
    }),
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, 'dist/[name].json'),
      scope: 'myLibrary'
    }),
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, 'dist/[name].json'),
      sourceType: 'module'
    }),
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, 'dist/[name].json'),
      context: __dirname
    }),
    new webpack.DllReferencePlugin({
      manifest: require('./dist/vendor.json')
    })
  ]
};

在该配置文件中，我们首先定义了一个名为 vendor 的入口文件，该文件包含了 React 和 React DOM 两个库。接着，我们将输出文件的名称设置为 [name].dll.js，将输出路径设置为 dist 目录，同时将输出的库名称设置为 [name]，将输出的库类型设置为 umd。这样可以让我们的 Dll 文件可以在不同的环境中使用。

接下来，我们定义了四个不同的 DllPlugin 插件，分别演示了 scope、sourceType 和 context 属性的用法。最后，我们使用了 DllReferencePlugin 插件，将刚刚生成的 vendor.json 文件引入到我们的主要配置文件中，以便于在后续的构建中复用其中的模块。

结语

通过上面的介绍，我们可以看到，DllPlugin 插件在 Webpack 中的作用非常重要。它可以将一些公共的代码提前打包成一个独立的文件，以便于在后续的构建中复用，从而优化我们的构建效率。同时，DllPlugin 插件还提供了一些高级用法，可以进一步优化我们的构建效率。因此，在我们的实际开发中，我们应该充分利用 DllPlugin 插件，以提高我们的开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d245d2a941bf713445301a

Webpack 中 DllPlugin 的使用详解