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

Question

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

Answer 1

我是这 3 个模块的作者。

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

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

我在universal-webpack 之前写了webpack-isomorphic-tools，所以universal-webpack 是推荐的工具。 然而，很多人仍然使用webpack-isomorphic-tools（包括我）并发现它不那么复杂。