如何使用webpack DLL插件？

Question

我刚刚开始使用webpack 3和dllplugin。我设法找到一些博客文章。这个。但是，它们都没有正确的代码示例/ GitHub示例代码。有人知道这个/有效示例对示例代码的引用吗？

Answer 1

这是一个很好的简单示例：

我们在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

Answer 2

我在项目之间共享组件时遇到问题。JS module not found in shared react project这个插件有帮助吗？