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')
})
]
}
要不你还是先确认一下 bundle.main.js 到底有没有所谓的“dll 包中的函数”吧,因为看起来根本没拆出去,还是被打包进 bundle 里了。
而下面的那只是个 SourceMap 而已。