我刚刚开始使用 webpack 3 和 dllplugin。我设法找到了一些博客文章 abt。这个。但是,它们都没有正确的代码示例/GitHub 示例代码。有谁知道对这个/工作示例的示例代码的任何引用?
最佳答案
这是一个很好的简单示例:
我们在 vendor.js 中定义我们的函数(这是我们将作为 DLL 引用的库)。
vendor.js
function square(n) {
return n*n;
}
module.exports = square;
然后定义 WebPack 配置以使用 DllPlugin 将其导出为 DLL。
vendor.webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: {
vendor: ['./vendor'],
},
output: {
filename: 'vendor.bundle.js',
path: 'build/',
library: 'vendor_lib',
},
plugins: [new webpack.DllPlugin({
name: 'vendor_lib',
path: 'build/vendor-manifest.json',
})]
};
在我们的应用程序中,我们简单地使用 require(./dllname) 引用创建的 DLL
app.js
var square = require('./vendor');
console.log(square(7));
在 WebPack 构建配置中,我们使用 DllReferencePlugin 来引用创建的 DLL。
app.webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: {
app: ['./app'],
},
output: {
filename: 'app.bundle.js',
path: 'build/',
},
plugins: [new webpack.DllReferencePlugin({
context: '.',
manifest: require('./build/vendor-manifest.json'),
})]
};
最后,我们需要编译DLL,然后应用程序使用WebPack。
编译:
webpack --config vendor.webpack.config.js
webpack --config app.webpack.config.js
要将文件包含在 HTML 中,请使用简单的 JS 包含脚本标记。
与以下 index.html 一起使用
<script src="build/vendor.bundle.js"></script>
<script src="build/app.bundle.js"></script>
引用:https://gist.github.com/robertknight/058a194f45e77ff95fcd
您还可以在 WebPack 存储库中找到更多 DLL 示例:
https://github.com/webpack/webpack/tree/master/examples
关于webpack - 如何使用 webpack DLL 插件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48745775/