Webpack 同构/通用插件如何工作？

Question

我找到了 2 个工具来解决服务器端模块加载器的问题：webpack-isomorphic-tools和Universal-webpack。有人可以向我解释这些事情是如何工作的关键步骤吗？它如何捕获/提取imported / required 模块？

Answer 1

我是这三个模块的作者。

webpack-isomorphic-toolsrequire()在 的帮助下挂钩到 Node.js 的函数require-hacker，并拦截require()对所有已配置资产的调用，extension返回其 Webpack 编译形式（取自Webpack 构建期间webpack-assets.json生成的webpack-isomorphic-tools/plugin形式）。

universal-webpack不挂钩到require()函数 - 它只是将客户端 Webpack 配置转换为服务器端 Webpack 配置的帮助器。它不在服务器端或其他地方运行。它只是一个 Webpack 配置生成器 - 事实证明，Webpack 有一个target: "node"参数，可以使其输出在 Node.js 上运行而没有任何问题的代码。

我webpack-isomorphic-tools之前写过universal-webpack，所以universal-webpack这是推荐的工具。然而许多人仍然使用它webpack-isomorphic-tools（包括我）并且发现它不太复杂。