Webpack中多個入口點的通用樣板

Question

在Webpack（4）中有沒有辦法將給定條目文件的導出傳遞給輔助模塊，輔助模塊本身就作為條目？ 基本上是一種“包裝”入口點的方法。

現在，我知道我可以輕松地使用CommonChunks 導入到一個條目中，但我想要做的是從另一個模塊的條目導出實際上做某事。 這就是原因。

我有一個反應應用程序，我正在使用Webpack來構建。 我從NEXT.js堆棧移植，為了我的目的，這是一個開銷的來源。 我想要保留的一個功能是將路由放在pages/文件夾中，我在每個頁面中export default Component ，自動渲染。 這對於Webpack項目來說是非常好的行為。

現在，我得到的基於目錄的多條目大致是這樣的。

/* webpack.config.js */

const pages = {};

for(let route of fs.readdirSync('./pages')){
    pages[route] = path.resolve('./pages', route);
}

module.exports = {
    entry: pages,
    /* ... */
}

有用; 但我需要為每個條目要求並設置ReactDOM.render 。 單獨這不是什么大問題，但是當進入HMR（熱重載）和其他東西時，它增加了很多冗余。 它還使我的代碼開發/生產不可知變得更加困難。

我想做的就是這個。 在我的項目中的某個地方有一個模塊可以實現我的頁面的實際渲染，例如：

/* init.js */

const MyEntryPoint = require("🤷‍♂️").default;

const intoContainer = 
    document.body.appendChild(document.createElement("div"))

ReactDOM.render(MyEntryPoint, intoContainer);

我的多個條目頁面看起來像

/* pages/login/index.js */

export default () => (
    <div>Welcome to the login page!</div>
)

我知道有一種方法可以為給定的條目傳遞數組，但根據我的理解，它們是連接在一起的，不能相互導入。 我唯一的另一個理論是將每個頁面導出為庫，並手動將bootstrap代碼作為腳本標記包含在內。

有沒有更好的方法來做到這一點？

Answer 1

我確實在某個時候想到了這一點。 結束了我自己的解決方案
Webpack中級入門 。

它的作用是加載在IntermediateEntryPlugin指定的給定insert文件。

您可以通過NPM安裝和導入此插件作為webpack-intermediate-entry 。

然后它用該文件替換所有條目，並將每個條目替換為"__webpack_entry__" import。

希望它有所幫助！