面试题：Webpack中DllPlugin与HtmlWebpackPlugin如何配合使用

目的

DllPlugin：将一些不常变化的第三方库（如 React、Vue 等）提前打包成 DLL 文件，在后续构建时，不再重复打包这些库，从而显著提升构建速度。因为这些库代码量大且更新频率低，分离出来可避免每次构建都重新处理它们。
HtmlWebpackPlugin：自动生成 HTML 文件，并将打包后的资源（如脚本、样式）正确引入到 HTML 页面中。与 DllPlugin 配合，能确保生成的 DLL 文件正确地被引入到 HTML 页面，使页面可以正常使用这些预打包的库。

具体步骤

安装插件

npm install webpack --save-dev
npm install webpack - cli --save-dev
npm install html - webpack - plugin --save-dev

配置 DllPlugin

创建 webpack.dll.js 文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        // 例如将 react 和 react - dom 打包到一个 dll 文件中
        vendor: ['react','react - dom']
    },
    output: {
        path: path.resolve(__dirname, 'dll'),
        filename: '[name].dll.js',
        library: '[name]_[hash]'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'dll', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ]
};

运行打包命令

npx webpack --config webpack.dll.js

配置 HtmlWebpackPlugin

在 webpack.config.js 中配置

const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
const webpack = require('webpack');

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

在 HTML 模板中引入 DLL 文件

在 src/index.html 中（假设模板文件在此）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>Webpack Dll Example</title>
</head>

<body>
    <div id="root"></div>
    <script src="../dll/vendor.dll.js"></script>
</body>

</html>

在实际项目中，可结合插件如 html - webpack - inline - source - plugin 等实现更自动化、灵活的 DLL 文件引入方式，例如将 DLL 文件内联到 HTML 页面中。

星途面试题库

面试题：Webpack中DllPlugin与HtmlWebpackPlugin如何配合使用

知识考点

面试题答案

目的

具体步骤