webpack-dll

最新推荐文章于 2024-07-30 18:36:42 发布

goudexingwu

最新推荐文章于 2024-07-30 18:36:42 发布

阅读量483

点赞数

文章标签： jquery node.js javascript

本文链接：https://blog.youkuaiyun.com/goudexingwu/article/details/119906235

版权

本文介绍了webpack的DLL技术，该技术可以将第三方库如jquery、react等单独打包，避免重复打包，提高构建速度。通过运行webpack.dll.js配置文件，生成如jquery.js的分离文件，并在manifest.json中记录映射关系。利用AddAssetHtmlWebpackPlugin插件，确保这些库在页面加载时被注入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

node-module会把所有的库打包成一个文件
dll会把所有引入的文件拆开，打包成不同的文件。

使用dll技术，对某些库（第三方库：jquery,react,vue…）进行单独打包
当你运行webpack时，默认查找webpack.config.js配置文件
需求：需要运行webpack.dll.js文件
运行指令 -->webpack --config webpack.dll.js

下面的配置就会启动

webpack.dll.js

const{resolve}=require('path');
const webpack=require('webpack');

module.exports={
entry:{
//最终生成的[name]--->jquery
//['jquery']--->要打包的库是jquery
  jquery:['jquery']
 },
 output:{
  filename:'[name].js',
  path:resolve(_dirname,'dll'),
  library:'[name]_[hash]'  //打包的库里面向外暴露出去的内容叫什么名字
 }，
 plugins:[
   //打包生成一个mainnifest.json--->该文件提供和jquery映射
   new webpack.DllPlugin({
     name:'[name]_[hash]', //映射库的暴露的内容名称
     path:resolve(_dirname,'dll/mainfest.json')  //输出文件路径
  })
 ]，
 mode:'production'
}

在这里插入图片描述

dll打包后，生成的jquery.js文件内部的内容

在这里插入图片描述

webpack.dll.js文件的配置决定了打包的库里面向外暴露出去的内容叫什么名字

在这里插入图片描述

mainifest.json里面文件的映射关系

在这里插入图片描述

AddAssetHtmlWebpackPlugin({
filepath:resove(_dirname)
})

webpack.config.js

plugins:[
new HtmlWebpackPlugin（{
    template: './src/index.html'
  }）,
  //告诉webpack哪些库不参与打包，同时使用时的名称也得变
  new webpack.DllReferencePlugin({
    mainifest:resove(__dirname,'dll/manifest.json')
 }),
 //将某个文件打包出去，并且在  HTML 中自动引入该资源
 new AddAssetHtmlWebpackPlugin({
     filepath:resolve(_dirname,'dll/jquery.js')
  })
]

控制台指令： webpack
会产生下图自动打包jquery的效果变化

在这里插入图片描述