如何在Webpack中处理第三方库（vendor libraries）和动态链接库（Dynamic Linking Libraries）！

在Webpack中处理第三方库和动态链接库主要有两种方式：通过提取第三方库作为独立的包（vendor bundle）和使用动态链接库（DLL）。

独立的包

1. 提取第三方库作为独立的包（vendor bundle）：这种方式适用于将第三方库与应用程序的代码分开打包。以下是实现的步骤：

a. 在Webpack配置中，通过使用 optimization.splitChunks 配置选项，将第三方库抽离出来，并生成一个独立的包。

module.exports = {
  // ...
  optimization: {
	splitChunks: {
	  chunks: 'all',
	  name: 'vendor'
	}
  }
};

b. 使用 HtmlWebpackPlugin 插件生成HTML文件，并在这个文件中引入 vendor bundle。

const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  // ...
  plugins: [
	new HtmlWebpackPlugin({
	  template: './src/index.html',
	  chunks: ['vendor', 'main']
	})
  ]
};

这样，Webpack会将第三方库打包为一个独立的包，可以在HTML文件中单独引入。

动态链接库

2. 使用动态链接库（DLL）：DLL是一种预先编译的JavaScript库，可以在多次构建过程中重复使用。以下是实现的步骤：

a. 创建一个Webpack配置文件，用于打包第三方库为DLL。

// webpack.dll.config.js
 
module.exports = {
  entry: {
	vendor: ['react', 'react-dom', 'lodash'] // 第三方库的名称，比如React、React DOM、Lodash
  },
  output: {
	path: path.resolve(__dirname, 'dist'),
	filename: '[name].dll.js',
	library: '[name]'
  },
  plugins: [
	new webpack.DllPlugin({
	  name: '[name]',
	  path: path.resolve(__dirname, 'dist/[name].manifest.json')
	})
  ]
};

b. 在命令行中运行Webpack配置文件，以生成第三方库的DLL文件。

webpack --config webpack.dll.config.js

c. 在应用程序的Webpack配置中，使用 webpack.DllReferencePlugin 引用生成的DLL文件，并指定 DLL 文件的路径。

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

这样，当进行应用程序的构建时，Webpack会使用预先编译的DLL文件，而不是重新打包第三方库，提高构建速度。

通过上述两种方式之一，你可以更好地处理第三方库和动态链接库，提高打包效率并减小构建产物的体积。