Webpack 如何在网页包DLL中包含npm模块？

我正在尝试使用webpack（1.13版）的DLL插件创建一个DLL包，其中包含我的各种React项目（即preact、preact compat、redux、React-redux、redux saga、recompose）所需的所有npm模块。我想通过我的商店的内部npm repo分发包含所有这些npm模块的DLL包。一些web应用程序应该从npm repo加载DLL包，并使用其中包含的模块

在的示例中，alpha DLL中包含名为

module

的模块<代码>模块来自示例目录中的节点_modules目录（dll目录下的一个目录）

这是可行的，当我使用node build.js在dll user dir中构建示例并查看

dll user/js/output.js

，我可以看到以下几行：

/*!*****************************************************************************************!*\
!*** 来自dll参考alpha_e0d5512587ca63cbbd71***的委派../node_modules/module.js！
\*****************************************************************************************/

名为

module

的模块实际上不是一个合适的npm模块，它只是一个名为

module.js

的文件，直接位于

node\u module

目录中。我尝试包含一个“真实世界”的npm模块，在本例中是

preact

在构建

dll

和

dll user

项目后，查看

output.js

文件，我可以看到preact模块的整个代码都包含在输出中，没有发生委托

如何使其正常工作？这是网页中的错误吗？

我在GitHub上创建了一个代码示例，该示例基于显示问题的webpack DLL示例：

EDIT：

最初，我只是让给定的示例起作用，但不知道应该如何使用所有东西。我写了这篇文章（下面是新内容）：

---

好吧，我想我至少得到了一部分。 我会告诉你，为了让你的榜样发挥作用，你必须做些什么

有两种方法可以让它工作：

从包含文件夹的

包.json

（和

节点_模块

，如有必要）中删除

前置

，即顶层。现在只有

dll

文件夹中有

preact

然后在

dll用户中更改
require
调用
example.js
文件夹到

require（“../dll/node\u modules/preact”）


这应该行得通，但并不完全是我们想要的

现在反过来说。从dll文件夹中删除

preact

，但仅将其安装到包含的文件夹中。
运行这两个构建脚本，并查看

output.js

中所委托的所有内容，包括

preact

---

新建：

好的，我想在这里多戳一戳之后，它是如何工作的。（因为我们彼此了解，而且在一起工作的话会少一些，但我认为如果我在细节上更明确一点，这也可能对其他人有所帮助，所以请容忍我。）

初步说明：我假设您想要创建一个dll文件，1）可以使用npm安装到项目中，2）以某种方式将单独的脚本标记包含到HTML中。该脚本在执行时创建一个全局变量，该变量公开一个函数，应用程序脚本使用该函数来解析依赖关系。 此外，我假设您已经为dll包设置了一个目录，并且只安装了

package.json

和webpack ready

首先创建一个

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

看起来像（或类似于）：

在您的

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 ***!
  \***************************************************************************************************/

有人可能会问：“为什么我不能使用我的标准requires，比如

require（“preact”）

？”。答案是：你可以，但是。但在这种情况下，您必须在应用程序中安装dll包中的所有依赖项。因为在本例中，您将使用“映射模式”而不是“范围模式”（请参阅）

在作用域模式下，您必须显式地

要求
模块相对于清单的路径。好处是：您不必在应用程序中安装模块（并将其作为
package.json
中的依赖项）

在映射模式下，您可以像往常一样需要该模块（就像它安装在应用程序的节点_模块中一样），但您也必须使用应用程序将其安装在dll中。这是因为Webpack将首先评估
require
调用，然后意识到同一模块也在dll包中，因此只在输出中呈现别名（“委托…”）


现在我认为这两种模式都有用处。如果您只构建应用程序本地dll以加快构建速度，则映射模式很酷。在这种情况下，您将在本地安装并保存进入dll的所有DEP。但是，如果您想构建一个dll捆绑包作为一个可安装的模块，并在应用程序之间共享它-并且您不想跟踪每个应用程序中dll中的所有模块-您很可能希望使用作用域模式，从而付出更详细的
require
调用的代价。
您可以尝试这种方法

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

谢谢，我会检查你的解决方案，然后再给你回复。有趣的是，at（手机优化版）的人正做着我所做的事情
new webpack.DllReferencePlugin({
  context: process.cwd(), // Important
  manifest: manifest.json
}),