你需要了解的 webpack dll

Webpack dll 的作用

Webpack dll 的主要作用是提高构建速度。在传统的 webpack 打包方式中，每次构建时，所有依赖都会被重新打包。这对于一些不常改变的依赖来说，是一个很大的浪费。Webpack dll 可以将这些不常改变的依赖单独打包，从而减少后续构建时的重复打包工作。

Webpack dll 的使用场景

Webpack dll 可以用于以下场景：

• 大型项目：对于大型项目，构建时间往往很长。使用 webpack dll 可以将项目中的一些不常改变的依赖单独打包，从而减少后续构建时的重复打包工作，从而提高构建速度。
• 多个项目共用依赖：如果多个项目共用一些依赖，那么可以使用 webpack dll 将这些依赖单独打包，然后在各个项目中引用这些 dll 文件。这可以减少各个项目构建时的重复打包工作，从而提高构建速度。
• 开发环境：在开发环境中，经常需要对代码进行修改和调试。使用 webpack dll 可以将项目中的一些不常改变的依赖单独打包，从而减少每次修改代码时需要重新打包的依赖数量，从而提高开发效率。

如何使用 Webpack dll

要使用 webpack dll，需要先安装 webpack-dll-plugin 插件。然后，在 webpack 配置文件中添加以下配置：

const webpack = require('webpack');
const DllPlugin = require('webpack-dll-plugin');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom']
  },
  plugins: [
    new DllPlugin({
      name: '[name]',
      path: 'dist/dll/[name].dll.js',
    })
  ]
};

在上面的配置中，我们使用 DllPlugin 插件将 react 和 react-dom 这两个依赖打包成了一个名为 vendor.dll.js 的 dll 文件。

打包完成后，可以在项目中引用这个 dll 文件。在 webpack 配置文件中添加以下配置：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/dll/vendor-manifest.json')
    })
  ]
};

在上面的配置中，我们使用 DllReferencePlugin 插件引用了 vendor.dll.js 这个 dll 文件。

这样，在项目构建时，webpack 就会自动将 vendor.dll.js 中的依赖引用到项目中，而不需要重新打包这些依赖。