2016-09-24 11 views
3

私は古いrequire.js gruntアプリケーションをwebpackに変換しようとしています。現在のgrunt設定では、2つの異なるバンドルを構築し、アプリケーションを起動するときに必要なバンドルを決定するブートストラップファイルを用意しています。複数の解決のWebpack multiple resolve.aliasリスト

私は、webpackに切り替えるときにこの構造を保持する必要があると思っていました。しかし、複数のエントリを持つwebpackを設定しようとしたとき、私は問題に遭遇しました。別々のエントリポイントに対して別々の解決エイリアスリストを提供することはできません。モジュール名がrequire("my-module")であり、両方のバンドルに異なるmy-moduleインスタンスを持っているため、これらのエイリアスリストを提供できるようにする必要があります。

webpackでこれを達成する方法が見つかりませんでした。私はこの考え方に縛られていて、この問題の代替解決策を見ることができないかもしれないので、アドバイスは大歓迎です!ここで

は私がやりたいどのようなコードです:

猫:ここ

webpack.config.js

module.exports = { 
    entry: { 
    cats: ["./app/app-cats"], 
    dogs: ["./app/app-dogs"] 
    }, 
    output: { 
    path: path.join(__dirname, "bin"), 
    filename: "[name].entry.js" 
    }, 
    resolve: { 
    alias: { 
     // I would like to provide both entry points their own 
     // list of aliases, but currently webpack is not supporting this. 
     cats: { 
     animals: './cats.js' 
     }, 
     dogs: { 
     animals: './dogs.js' 
     }, 
    } 
    }, 
}; 

は、私たちの現在のビルドがどのように機能するかを説明するためのファイルの残りの部分です.jsファイル

var cats = ['dave', 'henry', 'martha']; 
module.exports = cats; 

dogs.js

var dogs = ['hulda', 'hilla']; 
module.exports = dogs; 

アプリ-cats.js

var animals = require('animals') 
console.log(animals); 

アプリ-dogs.js

var animals = require('animals') 
console.log(animals); 

答えて

0

この質問には答えがないとして、私たちは私たちの中でこれを解決することになった方法を説明しますプロジェクト。

最初に、webpackの設定を変更して、2つのバンドルではなく1つのバンドルを作成しました。その後、2つの異なる実装を持つモジュールごとに "switcher"モジュールを作成しました。 Switcherモジュールは、制御値に基づいて正しい実装を返す新しいモジュールです。私たちの場合、最終的にウィンドウオブジェクトからモードを読み込むappModeモジュールを作成しました。私たちのスイッチャーモジュールの一つの

例:

define(["appMode", "scripts/userData/firstUserData", "scripts/userData/secondUserData"], 
(appMode, firstImplementation, secondImplementation) => appMode.useFirstData() ? firstImplementation : secondImplementation) 

我々は二つの異なる実装を持っていた100以上のモジュールを持っていたので、これは面倒な変化であったが、それは動作します。

関連する問題