如何将 Webpack 生成的代码插入服务器端 node.js 脚本？答案

【问题标题】：How do I insert Webpack-generated code into a server-side node.js script?如何将 Webpack 生成的代码插入服务器端 node.js 脚本？
【发布时间】：2018-07-20 07:11:34
【问题描述】：

我有一个用 Typescript 编写的网络应用程序。没有框架，因为它们不适合我的任务。该应用程序是使用 Webpack 编译的。到目前为止，它工作正常。然后我想实现应用程序某些部分的服务器端渲染。我希望我的部分代码和我的 html 页面以及图像和样式由 node.js 脚本提供。

所以。我正在尝试配置 Webpack 以使我成为一个 js 文件，然后我可以将其 require 放入我的另一个 ssr.js node.js 服务器脚本中。但我不知道该怎么做。生成的脚本被包装成一些东西，它偶然发现 window 没有被定义并且不等于 global 命名空间。

我如何处理任务？ Webpack 一般适合编译服务器端脚本吗？如果不是，那我还能如何进行服务器端渲染？

我的.ts 文件是使用ts-loader 处理的：

{
   test: /\.ts$/,
   use: 'ts-loader',
},

更新：我按照另一个问题的建议添加了target: 'node'，但总的来说还不够。 window 的错误消失了，但现在我无法将 export 的内容与 require 的内容联系起来；

我的文件如下所示：

export function someFunc(x) {
    // Some code
}

我希望我能做到

const something = require('somefile');

然后从sonething 中获取我的someFunc。但这不起作用。代替something，我得到一个奇怪的对象，看起来像这样：

{ ids: [ 0 ],
  modules: 
   [ [Function],
     [Function],
     [Function],
     [Function] ]
}

【问题讨论】：

no window object present webpack nodejs的可能重复
为什么要使用 webpack 来打包服务端的脚本？只需直接 require 各个模块（根据需要使用 Typescript 编译）。
你绝对可以在服务器端使用 webpack，不过正如@Bergi 所提到的，它并不总是必要的。也许target 选项可以帮助您。对于服务器端，您应该将其设置为“节点”。
如果我不使用 Webpack，那么我将不得不使用两个编译系统而不是一个。我必须以某种方式编译 sass 和 typescript。然后是 html 文件和图像必须正确地相互连接。

标签： javascript node.js typescript webpack server-side-rendering

【解决方案1】：

好的，我有两个问题。一个已经回答了，我必须将 Webpack 的 target 设置为 node。现在我发现了第二个问题。是CommonsChunkPlugin。此插件与taget: 'node' 不兼容。我不得不为服务器端删除它。

【讨论】：