如何使用webpack DLL插件? [英] How to use webpack DLL Plugin?
问题描述
我刚刚开始使用webpack 3和dllplugin.我设法找到了一些博客文章.这.但是它们都没有正确的代码示例/GitHub示例代码.有人知道这个/工作示例的示例代码的引用吗?
I am just starting to use webpack 3 and dllplugin. I managed to find a few blog articles abt. this. However none of them with a proper code sample/ GitHub samplecode. Does anyone know any references to sample code for this/ working example?
推荐答案
这是一个很好的简单示例:
This is a good simple example:
我们在vendor.js(这是我们将作为DLL引用的库)中定义函数.
We define our functions in vendor.js (this is the library that we are going to reference as DLL).
vendor.js
function square(n) {
return n*n;
}
module.exports = square;
然后定义WebPack配置,以使用DllPlugin将其导出为DLL.
Then define WebPack configuration to export this as a DLL using DllPlugin.
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
In our application, we simply reference the created DLL using require(./dllname)
app.js
var square = require('./vendor');
console.log(square(7));
在WebPack构建配置中,我们使用DllReferencePlugin引用创建的DLL.
And in WebPack build configuration, we use DllReferencePlugin to reference the created 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编译应用程序.
Finally, we need to compile the DLL, and then the application using WebPack.
编译方式:
webpack --config vendor.webpack.config.js
webpack --config app.webpack.config.js
要将文件包含在HTML中,请使用简单的JS包含脚本标签.
To include the file inside HTML, use simple JS include script tag.
与以下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
Reference: https://gist.github.com/robertknight/058a194f45e77ff95fcd Also you can find more DLL examples in WebPack repository: https://github.com/webpack/webpack/tree/master/examples
这篇关于如何使用webpack DLL插件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!