webpack5 - DllPlugin 打包后的文件在 Webpack5 中如何被浏览器加载？

Question

webpack5，DllPlugin打包出来的文件是怎么被引入页面的？
↓这是打包后的目录

↓浏览器打开html后，主文件可以调用dll包中的函数，但network里头没有获取过vendor.dll.js

↓但是浏览器source这里确实已经引入dll里头的东西了，它到底是怎么引入的

蹲大佬orz

附上配置文件
↓ webpack.config.js

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

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, 'dll'),
      manifest: require('./dll/vendor.manifest.json'), // 引用生成的 DLL 映射文件
    }),
    new HtmlWebpackPlugin()
  ],
  optimization: {
    runtimeChunk: 'single', // 将 runtime 独立打包为 runtime.js
  },
};

↓ webpack.dll.config.js

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

module.exports = {
  mode: 'development',
  entry: {
    vendor: ['lodash']
  },
  output: {
    path: path.resolve(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]_dll'
  },
  plugins: [
    new webpack.DllPlugin({
        name: '[name]_dll',
        path: path.resolve(__dirname, 'dll', '[name].manifest.json')
    })
  ]
}

Answer 1

要不你还是先确认一下 bundle.main.js 到底有没有所谓的“dll 包中的函数”吧，因为看起来根本没拆出去，还是被打包进 bundle 里了。

而下面的那只是个 SourceMap 而已。