webpack5 dllplugin 打包第三方库文件格式不对

如果你使用 webpack5 的 DllPlugin 插件打包第三方库文件，但是发现生成的文件格式不正确，可能是因为你没有正确设置 DllReferencePlugin 插件。

首先，你需要使用 DllPlugin 插件打包第三方库文件，生成一个名为 `dll.[name].js` 的文件，例如：

// webpack.config.dll.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['react', 'react-dom', 'lodash'],
  },
  output: {
    path: path.resolve(__dirname, 'dll'),
    filename: 'dll.[name].js',
    library: '[name]',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, 'dll/[name].json'),
    }),
  ],
};

然后，在你的主要配置文件中，你需要使用 DllReferencePlugin 插件来引用生成的 dll 文件，并把它们添加到你的打包文件中：

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dll/vendor.json'),
    }),
  ],
};

注意，这里的 `manifest` 属性要指向之前生成的 `vendor.json` 文件。

这样配置后，你的打包文件就会正确引用之前生成的第三方库文件了。