webpack dllplugin的使用姿势

part I：webpack dllplugin的配置

这里output里的filename就是生成的文件名称，这里也就是dll_vendor.js.而library是动态库输出的模块全局变量名称。注意，这个library一定要与webpack.DllPlugin配置中的name完全一样。为什么呢？

看一下，生成的manifest文件以及dll_vendor文件就明白了。

dll_vendor.js文件如下：（这里为了清晰，没有压缩）

注意library的作用，见 官网 。配置了library，就会默认生成上述格式的文件。

vendor-manifest.json文件如下：

也就是说，这里是一种对应的关系，只用vendor-manifest文件中的name与真正的变量一致，才能被找到。

经过上述三个步骤后，就大功告成了。无论是正式环境build，还是webpack-dev-server都能引用dll文件。

part II：简单分析源码

很明显，只涉及了webpackDllPlugin以及webpackReferencePlugin，那么这一part的研究对象就是这两位了。

其中LibManifestPlugin用于生成对应的manifest.json文件。

源码片段如下,我添加了核心的两处注释：

part III：总结

webpack DllPlugin优化，使用于将项目依赖的基础模块（第三方模块）抽离出来，然后打包到一个个单独的动态链接库中。当下一次打包时，通过webpackReferencePlugin，如果打包过程中发现需要导入的模块存在于某个动态链接库中，就不能再次被打包，而是去动态链接库中get到。

以下供参考：

1、建议使用第三方 IDE 工具，比如 cnpack 的 源码模板专家 功能：

2、如果不愿意使用第三方工具，则可以考虑自己建立Delphi窗体模板，使用的时候在Flie->New->Other 然后找到这个模板窗体。仅仅为了代码的格式化，并不值得推荐。

webpackChunkName

import 中添加注释们可以进行诸如给 chunk 命名或选择不同模式的 *** 作。只有当调用模块导入的情况下触发

https://webpack.docschina.org/api/module-methods/#dynamic-expressions-in-import

&

test.js

引入test.js模块

webpackPrefetch

import中预获取/预加载模块

https://webpack.docschina.org/guides/code-splitting/#prefetchingpreloading-modules

两个结合一起用

以上是在优化项目中用到比较多

特殊情况下，如不想通过entry多入口打包

import动态导入语法：可以将某个文件单独打包，如下test被单独打包

---