webpack DLLにnpmモジュールを含めるにはどうすればよいですか？

Question

webpack（バージョン1.13）のDLLプラグインを使用して、さまざまなReactプロジェクト（つまり、preact、preact-compat、redux、react-redux、redux）に必要なすべてのnpmモジュールを含むDLLバンドルを作成しようとしています。 - サガ、再構成）。私は、これらのnpmモジュールをすべて含むDLLバンドルを私の店の内部npmリポジトリを介して配布したいと思います。いくつかのWebアプリケーションはnpmリポジトリからDLLバンドルをロードし、そこに含まれるモジュールを使用する必要があります。

using DLLs in webpack from the webpack repo on GitHubの例では、moduleという名前のモジュールがalpha-DLLに含まれています。 moduleは、例dir（dllディレクトリの下の1つのディレクトリ）のnode_modulesディレクトリから取得します。しかし、

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

がmoduleという名前のモジュールがある：

これは私がノードbuild.jsを使用してDLLユーザーディレクトリの例を作成し、dll-user/js/output.jsを見たとき、私はこれらの行を見ることができ、動作します実際に適切なnpmモジュールではなく、ただmodule.jsという名前のファイルがnode_moduleディレクトリに直接置かれています。私は "現実世界"のnpmモジュールを含めようとしました、この場合はpreactです。

dllとdll-userプロジェクトをビルドした後、output.jsファイルを見ると、プレアクトモジュールのコード全体が出力に含まれていることがわかりました。委任は起こっていません。

どうすればこの作業を適切に行うことができますか？それはwebpackのバグですか？

私は問題を示してWebPACKのDLLの例に基づいて、GitHubの上のコード例を作成しました：https://github.com/pahund/webpack-dll-problem

Answer 1

EDIT：

をもともと私は与えられた例の作業をしたが、本当がなかったですすべてのものが使われるはずのアイデア。

---

[OK]を、ので、私はそれの少なくとも一部だと思う：私はこの（ブロックの下に新しいコンテンツを）書きました。 私はあなたの事例を作るためにあなたがしなければならないことを教えてくれるでしょう。

それを動作させるには、2つの方法があります（必要に応じてnode_modules）

1. がpackage.jsonからpreactを削除含むフォルダのは、すなわち、トップレベル。今すぐpreactがdllフォルダにのみあります。
   は、次に動作しますが、私たちが望むものを正確ではないはずです
   require("../dll/node_modules/preact")
   にdll-user フォルダ内のexample.jsでrequireコールを変更します。

2. ここでは逆です。 dllフォルダからpreactを削除しますが、フォルダを含むにのみインストールしてください。
   両方のビルドスクリプトを実行し、output.jsにはpreactを含むべきすべての委任があることがわかります。

---

新：

[OK]を、もう少しここにチャンスをうかがった後、私はそれが動作考える方法ですので。 （私たちはお互いを知っていて、一緒に仕事をしていることが少ないので、もっと細かいことがあれば、他の人にも役立つかもしれないと思うので、私には負担してください）

予備の注釈： 1）npmでプロジェクトにインストールできるdllファイルを作成したい、2）HTMLに別のスクリプトタグを何らかの形で含めること。このスクリプトは実行時に、アプリケーションスクリプトが依存関係を解決するために使用する関数を公開するグローバル変数を作成します。 また、すでにpackage.jsonしかインストールされておらず、webpackの準備が整っているdllバンドル用のディレクトリがあるとします。

まず、あなたがこのようなwebpack.config.js作成：

dll-project 
|_ node_modules 
| |_ preact 
|_ main.js 
|_ main-mainifest.json 
|_ package.json 
|_ 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) 
    }) 
    ] 
}; 

今すぐDLLプロジェクトフォルダの構造は今

$ webpack 

とのバンドルとそのマニフェストを作成します

このパッケージを別のプロジェクト、アプリにインストールしました：

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

このwebpack.config.jsは次のように（またはそれに類似した）に見えるこの：あなたのindex.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") 
    }) 
    ] 
}; 

、アプリのコードである、あなたは、このようにDLLバンドルしているモジュールが必要です。

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

あなたがwebpack -dを実行する場合は、012を生成して、次のようなものが表示されます：

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

一つは、「なぜ、私はちょうど私の標準はrequire("preact")のような必要と使用することはできません？」尋ねるかもしれません。答えはあなたができることですが、。しかし、その場合は、あなたのアプリケーション内にのdllバンドルにあるこれらの依存関係をすべてインストールする必要があります。この場合、「スコープモード」（Webpack Docsを参照）の代わりに「マップモード」を使用するためです。

スコープモードでは、明示的にrequireマニフェストを基準にしたモジュールへのパスが必要です。これは、アプリ内にモジュールをインストールする必要はありません（また、package.jsonに依存している必要があります）。

マップモードでは、通常のように（アプリケーションのnode_modulesにインストールされているように）モジュールを要求できますが、アプリを使用してdllにもインストールする必要があります。これは、Webpackが最初にrequire呼び出しを評価してから、同じモジュールがdllバンドルにも含まれていることに気づき、エイリアス（ "委任された..."）だけを出力にレンダリングするためです。

---

私はこれらの両方のモードのユースケースがあると思います。マップされたモードは、あなたのビルドをスピードアップするためのアプリケーションローカルDLLを構築しているだけの場合はクールです。その場合、あなたはインストールし、とにかくローカルにdllに入るすべてのdepsを保存します。しかし、インストール可能なモジュールとしてdllバンドルを構築してアプリ間で共有したい場合、そしてこれらのアプリごとにdllのすべてのモジュールを追跡したくない場合は、スコープを使用することをお勧めしますより冗長なrequireコールの価格を支払うモード。