如何在webpack DLL中包含npm模块？

Question

我试图使用webpack的DLL插件(1.13版)来创建一个DLL包，其中包含了我的各种反应项目所需的所有npm模块(即preact，preact-compat，redux，redux，redux-saga，recompose)。我想通过我店的内部npm回购来分发包含所有这些npm模块的DLL包。几个web应用程序应该从npm加载DLL包，并使用其中包含的模块。

在webpack的DLL在GitHub上的应用的示例中，alpha-DLL中包含了一个名为module的模块。module来自示例dir中的node_modules目录(在dll dir下面一个dir)。

这是可行的，当我使用节点build.js在dll-user dir中构建示例并查看dll-user/js/output.js时，我可以看到以下几行：

/*!*****************************************************************************************!*\ !*** delegated ../node_modules/module.js from dll-reference alpha_e0d5512587ca63cbbd71 ***! \*****************************************************************************************/

但是，名为module的模块并不是一个合适的npm模块，它只是一个名为module.js的文件，直接位于node_module目录中。我尝试包括一个“真实世界”的npm模块，在本例中是preact。

在构建dll和dll-user项目之后，查看output.js文件，我可以看到preact模块的整个代码都包含在输出中，没有出现委托。

，我怎样才能使它正常工作？这是webpack的错误吗？

我根据webpack的DLL示例在GitHub上创建了一个代码示例，该示例显示了问题：https://github.com/pahund/webpack-dll-problem

Answer 1

编辑

最初，我只做了给定的例子，但没有真正的概念，一切应该如何使用。我写了这个(块下面的新内容)：

好吧，我想我至少得到了一部分。我会告诉你，你要做什么才能使你的榜样奏效。

有两种方法可以让它发挥作用：

1. 从包含文件夹preact的的package.json (如果需要的话是node_modules )中删除，即顶层。现在您只在preact文件夹中使用dll。 然后将require在example.js文件夹中的dll-user调用更改为 require("../dll/node_modules/preact") 这应该是可行的，但不是我们想要的。
2. 现在换个角度。从preact dll文件夹中删除，但只将其安装到包含文件夹的中。 运行这两个构建脚本，并看到在output.js中所有委派的内容都应该包括preact。

新：

好的，在这里再深入一下，我认为它是如何工作的。(既然我们彼此认识，一起工作-少说几个字就行了，但我认为，如果我在细节上更明确一点，这也会对其他人有所帮助，所以请容忍我。)

初步备注:我假设您希望创建一个dll文件，您可以使用npm将其安装到项目中，并在HTML中添加一个单独的脚本标记。该脚本在执行时创建一个全局变量，该变量公开一个函数，然后应用程序脚本使用该函数来解决依赖关系。此外，我假设您已经为dll包设置了一个目录，并且只安装了一个package.json和webpack。

首先，您创建了这样一个webpack.config.js：

var webpack = require("webpack");
var path = require("path");

module.exports= {
  entry: ["preact"], // put here every module that goes into the dll
  output: {
    path: __dirname,
    filename: "index.js",
    library: "[name]_[hash]"
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, "[name]-manifest.json"),
      name: "[name]_[hash]" // (keep consistent with output.library)
    })
  ]
};

现在用以下方法创建包及其清单

$ webpack

dll项目文件夹的结构现在是：

dll-project
|_ node_modules
| |_ preact
|_ main.js
|_ main-mainifest.json
|_ package.json
|_ webpack.config.js

现在，您已经将此包安装到另一个项目中，您的应用程序：

app
|_ node_modules
| |_ dll-project
|_ index.js
|_ package.json
|_ webpack.config.js

这个webpack.config.js看起来(或类似)如下：

var webpack = require("webpack");

module.exports= {
  entry: "./index.js",
  output: {
    path: __dirname,
    filename: "app.js"
  },
  plugins: [
    new webpack.DllReferencePlugin({
      scope: mydll,
      manifest: require("./node_modules/dll-project/main-manifest.json")
    })
  ]
};

在您的index.js (即应用程序代码)中，您需要以这种方式在dll包中的模块：

var React = require("mydll/node_modules/preact/dist/preact");

如果您运行webpack -d，您将在生成的app.js中看到如下所示

/* 1 */
/*!***************************************************************************************************!*\
  !*** delegated ./node_modules/preact/dist/preact.js from dll-reference main_2057857de340fdcfd8aa ***!
  \***************************************************************************************************/

有人可能会问：“为什么我不能像require("preact")那样使用我的标准要求呢？”答案是:你可以，但是。但在这种情况下，您必须将所有这些依赖项安装在dll包中，也可以安装在应用程序中。因为在本例中，您将使用“映射模式”而不是“作用域模式”(请参见Webpack博士)。

在作用域模式中，您必须显式地require相对于清单的模块路径。好处是:您不必在应用程序中安装模块(并将其作为package.json中的依赖项)。

在映射模式下，您可以像往常一样要求模块(就像安装在应用程序的node_modules中一样)，但是您也必须使用应用程序在dll中安装它。这是因为Webpack将首先计算require调用，然后意识到相同的模块也在dll包中，因此只呈现一个别名(“委托.”)进入输出。

现在我认为这两种模式都有用例。映射模式是很酷的，如果您只是构建一个应用程序本地dll，以加快您的构建。在这种情况下，您将安装并保存本地进入dll的所有dep。但是，如果您希望将dll包构建为可安装模块，并在应用程序之间共享它--而且您不希望跟踪dll中每个应用程序中的所有模块--您很可能希望使用限定作用域模式，而代价是使用更冗长的require调用。

Answer 2

你可以试试这个方法；

new webpack.DllReferencePlugin({
  context: process.cwd(), // Important
  manifest: manifest.json
}),