首先,我们需要使用 DllPlugin
插件将第三方库打包成一个独立的文件,然后再在项目中引入这个文件。
-
安装
DllPlugin
插件shellnpm install --save-dev webpack webpack-cli webpack-dev-server webpack-manifest-plugin
-
创建一个新的 webpack 配置文件,比如
webpack.dll.config.js
,并添加以下内容:javascriptconst 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 文件的路径和名称。 -
在
package.json
文件中添加以下脚本命令:json"scripts": { "dll": "webpack --config webpack.dll.config.js" }
-
运行命令
npm run dll
,会在项目根目录下生成一个dll
文件夹,里面包含了生成的第三方库的文件和 manifest 文件。 -
在项目的 webpack 配置文件中,添加以下内容来引入生成的第三方库文件:
javascriptconst 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 插件将第三方库独立打包,并在项目中引入生成的文件。这样做可以提高构建速度,减少了第三方库的重新打包时间。