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

Question

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

Answer 1

我是这 3 个模块的作者。

webpack-isomorphic-tools 在 require-hacker 的帮助下 Hook 到 Node.js 的 require() 函数并拦截 require() 调用所有配置了 extension 的 Assets ，返回它们的 Webpack 编译形式(取自 webpack- 生成的 webpack-assets.json 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(包括我)，并发现它没有那么复杂。