多個條目的Webpack多個resolve.alias列表

我試圖將舊的require.js grunt構建的應用程序轉換爲webpack。在我們當前的grunt設置中，我們構建了兩個不同的bundle，並且我們有一個引導文件，我們決定在啓動應用程序時需要哪個bundle。多個條目的Webpack多個resolve.alias列表

我認爲在切換到webpack時應該保持這種結構。但是，當我試圖配置多個條目的webpack時遇到了問題，我無法爲單獨的入口點提供單獨的解析別名列表。我需要能夠提供這些別名列表，因爲我們有許多模塊需要其他模塊，例如require("my-module")，並且我們在這兩個bundle中都有不同的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;

APP-cats.js

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

APP-dogs.js

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

來源

2016-09-24 hequ

由於有這個問題沒有答案，我將解釋我們是如何結束了在解決這個我們項目。

首先，我們更改了webpack配置，以便我們只生成一個捆綁包而不是兩個捆綁包。然後，我們最終爲每個模塊編寫了具有兩種不同實現的「切換器」模塊。 Switcher模塊是一個新的模塊，它根據控制值返回正確的實現。在我們的例子中，我們最終編寫了一個appMode模塊，最終從窗口對象中讀取模式。

我們切換器模塊中的一個示例：

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

這是一個艱苦的變化，因爲我們有超過100個模塊，其中有兩種不同的實現，但它的作品。

來源

2017-03-02 07:36:48 hequ

多個條目的Webpack多個resolve.alias列表

回答

相關問題