DLLPlugin
和 DLLReferencePlugin
用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。
DllPlugin
这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json
的文件,这个文件是用来让 DLLReferencePlugin
映射到相关的依赖上去的。
context
(optional): manifest 文件中请求的上下文(context)(默认值为 webpack 的上下文(context))name
: 暴露出的 DLL 的函数名 (TemplatePaths: [hash]
& [name]
)path
: manifest json 文件的绝对路径 (输出文件)new webpack.DllPlugin(options);
在给定的 path
路径下创建一个名为 manifest.json
的文件。 这个文件包含了从 require
和 import
的request到模块 id 的映射。 DLLReferencePlugin
也会用到这个文件。
这个插件与 output.library
的选项相结合可以暴露出 (也叫做放入全局域) dll 函数。
DllReferencePlugin
这个插件是在 webpack 主配置文件中设置的, 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。
context
: (绝对路径) manifest (或者是内容属性)中请求的上下文manifest
: 包含 content
和 name
的对象,或者在编译时(compilation)的一个用于加载的 JSON manifest 绝对路径content
(optional): 请求到模块 id 的映射 (默认值为 manifest.content
)name
(optional): dll 暴露的地方的名称 (默认值为 manifest.name
) (可参考 externals
)scope
(optional): dll 中内容的前缀sourceType
(optional): dll 是如何暴露的 (libraryTarget)new webpack.DllReferencePlugin(options);
通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上,之后再在需要的时候通过内置的 __webpack_require__
函数来 require
他们
与output.library
保持name
的一致性。
这个插件支持两种模式,分别是作用域(scoped)和映射(mapped)。
dll 中的内容可以在模块前缀下才能被引用,举例来说,令scope = "xyz"
的话,这个 dll 中的名为 abc
的文件可以通过 require("xyz/abc")
来获取
dll 中的内容被映射到了当前目录下。如果一个被 require
的文件符合 dll 中的某个文件(解析之后),那么这个dll中的这个文件就会被使用。
由于这是在解析了 dll 中每个文件之后才发生的,相同的路径必须能够确保这个 dll bundle 的使用者(不一定是人,可指某些代码)有权限访问。 举例来说, 假如一个 dll bundle 中含有 loadash
库 以及 文件abc
, 那么 require("lodash")
和 require("./abc")
都不会被编译进主要的 bundle文件,而是会被 dll 所使用。
DllReferencePlugin
和DLL插件DllPlugin
都是在_另外_的 webpack 设置中使用的。
webpack.vendor.config.js
new webpack.DllPlugin({
context: __dirname,
name: '[name]_[hash]',
path: path.join(__dirname, 'manifest.json'),
});
webpack.app.config.js
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./manifest.json'),
name: './my-dll.js',
scope: 'xyz',
sourceType: 'commonjs2'
});
两个单独的用例,用来分别演示作用域(scope)和上下文(context)。
多个DllPlugins
和DllReferencePlugins
.