webpack优化配置-dll方式将第三方库独立打包

首先，我们需要使用 DllPlugin 插件将第三方库打包成一个独立的文件，然后再在项目中引入这个文件。

1. 安装 DllPlugin 插件

   npm install --save-dev webpack webpack-cli webpack-dev-server webpack-manifest-plugin

2. 创建一个新的 webpack 配置文件，比如 webpack.dll.config.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: '[name].dll.js',library: '[name]',},plugins: [new webpack.DllPlugin({path: path.resolve(__dirname, 'dll', '[name]-manifest.json'),name: '[name]',}),],};

   这里的 entry 字段是一个对象，键是你想要将哪些第三方库打包成独立文件，值是这些第三方库的名称。在这个例子中，我们将 react、react-dom 和 lodash 打包成一个名为 vendor 的文件。

   output 字段配置了输出的文件路径和文件名，library 字段定义了生成的文件的变量名。

   plugins 字段使用 DllPlugin 插件，指定了生成的 manifest 文件的路径和名称。

3. 在 package.json 文件中添加以下脚本命令：

   "scripts": {"dll": "webpack --config webpack.dll.config.js"}

4. 运行命令 npm run dll，会在项目根目录下生成一个 dll 文件夹，里面包含了生成的第三方库的文件和 manifest 文件。

5. 在项目的 webpack 配置文件中，添加以下内容来引入生成的第三方库文件：

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

   这里的 DllReferencePlugin 插件用于引入生成的 manifest 文件。

通过以上步骤，我们就可以使用 DllPlugin 插件将第三方库独立打包，并在项目中引入生成的文件。这样做可以提高构建速度，减少了第三方库的重新打包时间。