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 插件将第三方库独立打包，并在项目中引入生成的文件。这样做可以提高构建速度，减少了第三方库的重新打包时间。

代码007普通

打赏 收藏 海报 链接