WebpackDllPlugin和DllReferencePlugin1。插件的功能是分包解决，可以提取部分代码，形成单独的插件包，类似于windows系统中的dll包。2.插件用途因为插件的作用是代码分离，所以常被用来分离代码中的公共代码。比如在React中，公共模块[react、reactdom等]是可以分离的。三、优点1、你可以把它和你的应用程序分开创建一个库，当你使用webpack的w--watch模式，那么你修改库以外的文件，会非常快。2、用户修改代码时，只需要修改自己改动的部分，这对于热更新来说是一件好事。3、可以将一些功能相同的包组合起来，方便维护和开发。4.加载方式使用dll：此时再制作一个库包，就是这里的Childvendor。它有738KB，创建时间为1320ms。这里的主文件变得很小。创建它需要237毫秒。修改主文件的时候，只需要重新编译主文件修改的部分，这样会很快，这里只用了15ms。没有使用dll：你会发现这时候pageA和pageB都很大，因为它们都需要一个大包，如果使用了dll，这个大包就会被抽出来成为一个。创建耗时1412ms，这里只修改了一点点东西，却发现739kb的东西需要重新编译。这只是一个小文件。如果是大文件，会非常耗时。这里耗时62ms，所以如果文件很大的情况下，会大大影响build的速度。上图中，如果使用dll，它会将一些不需要经常修改的文件编译成一个库包，那么库中使用的所有文件的大小都会大大降低，修改后的编译速度文件会很快很快。如果是在移动应用开发中，可以将经常修改的文件和不经常修改的文件分开，这样每次更新只需要更换部分包。5.代码实现源码地址文件目录|-dist|--dll|---生成文件位置|-pageA.js|-pageB.js|-pageC.js|-vendor.js|-vendor2.js|-webpack.config.dll.js|-package.json/*eslintimport/no-extraneous-dependencies:["off"]*/constpath=require('path');constwebpack=require('webpack');//文件的输出目录constSTATIC_SRC='dist';//文件的输出文件夹constOUTPUT_PATH='dll';//控制是否开启分离模式constmain=[{name:'vendor',//这里是需要将文件打包进库包的入口：['./vendor.js','./vendor2.js','react','react-dom'],//输出位置和打包后的输出名称output:{path:path.resolve(__dirname,STATIC_SRC,OUTPUT_PATH),filename:'vendor.js',library:'vendor_[hash]'},plugins:[newwebpack.DllPlugin({name:'vendor_[hash]',//这里的文件输出文件需要和DllReferencePlugin路径一致：path.resolve(__dirname,STATIC_SRC,OUTPUT_PATH,'manifest.json')})],},{name:'app',dependencies:['vendor'],entry:{pageA:'./pageA',pageB:'./pageB',pageC:'./pageC'},output:{path:path.resolve(__dirname,STATIC_SRC,OUTPUT_PATH),filename:'[name].js'},plugins:[newwebpack.DllReferencePlugin({//这里需要保证路径与DllPlugin中生成的manifest路径，否则报错manifest:path.resolve(__dirname,STATIC_SRC,OUTPUT_PATH,'manifest.json')})]}];module.exports=main;参考OptimizingWebpackbuildtimesandimprovingcachingwithDLLbundleswebpack官方文件
