javascript - Webpack 中多个入口点的通用样板

Question

在 Webpack (4) 中，有没有办法将给定入口文件的导出传递到辅助模块中，辅助模块本身充当入口？基本上是一种“包装”入口点的方法。

现在，我知道我可以很容易地使用 CommonChunks 将 import 到一个条目中，但我想做的是 export from 另一个模块的条目来实际做一些事情在它的地方。原因如下。

我有一个使用 Webpack 构建的 React 应用程序。我正在从 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 Intermediate Entry .

它的作用是加载给定的 insert 文件，在 IntermediateEntryPlugin 中指定。

您可以通过 NPM 安装和导入此插件作为 webpack-intermediate-entry。

然后它用该文件替换所有条目，并依次替换 "__webpack_entry__" 导入。

希望对您有所帮助!