如何使用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屋！