Question

在Webpack（4）中，有什么方法可以将给定条目文件的导出传递到本身充当条目的帮助程序模块中？基本上是一种“包装”入口点的方法。

现在，我知道我可以轻松地使用CommonChunks 导入到条目中，但是我想做的是从条目中导入另一个模块以实际执行某项操作代替它。这就是为什么。

我有一个使用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>
)

我知道有一种方法可以传递给定条目的数组，但据我了解，它们是串联在一起的，不能互相导入。我唯一的另一种理论是将每个页面导出为一个库，并手动将引导程序代码包含为脚本标记。

还有更好的方法吗？

Answer 1

我确实确实在某个时候解决了这个问题。最终推出了我自己的解决方案，称为
Webpack Intermediate Entry。

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

您可以通过NPM以webpack-intermediate-entry的形式安装和导入此插件。

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

希望它会有所帮助！

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

1 个答案: