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

webpack5,DllPlugin打包出来的文件是怎么被引入页面的?
↓这是打包后的目录
image.png

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

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

蹲大佬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')
    })
  ]
}
阅读 540
1 个回答
image.png

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏