Node.js 如何使用目标属性的网页包

我是Webpack的新手，我正在努力弄清楚target到底做了什么

在文档中，Webpack显示：

节点：编译以在类似Node.js的环境中使用（使用Node.js 需要加载数据块）

Web：编译以在类似浏览器的环境中使用（默认）

但它非常抽象，没有说明实际的区别

我注意到，如果在节点模式下使用webpack服务器运行webpack配置文件， 我得到的错误未定义所需的，而 如果我只是使用webpack导出文件，然后独立运行这些文件，它运行得很好。目标是否仅适用于Web包开发服务器

module.exports = {
  mode: "development",
  target: "web", //node
  devtool: "cheap-module-source-map",
  entry: "./src/index",
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/",
    filename: "./bundle.js"
  },
  devServer: {
    stats: "minimal",
    overlay: true,
    historyApiFallback: true,
    disableHostCheck: true,
    headers: { "Access-Control-Allow-Origin": "*" },
    https: false
  },
}

---

我将目标属性设置为“web”，并从后端运行它。与目标“节点”没有区别。它运行得很好。我看不出这个属性有什么用处，一个非常简单的例子是

假设您正在创建一个

React

应用程序，它是一个客户端应用程序，将在浏览器上运行。您将目标设置为

web

。（这是默认值）

假设它是一个后端应用程序，就像一个express应用程序一样，它不会在浏览器上运行，而是从

节点

本身启动。因此，您将目标设置为

节点

。它使用Node.js

require

加载块，并且不接触任何内置模块，如

fs

或

path

---

有关更多选项，请参阅。这也是测试和查看不同网页目标的绝佳资源。同样适用于bug报告。

我将target属性设置为“web”，并从后端运行它。与目标“节点”没有区别。无论属性值如何，从webpack导出的文件都是相同的。是的，当您使用

fs

模块以及没有浏览器对应项的模块时，这一点很明显。有些模块不适用于浏览器，您将看到其中的差异。而且

\uuuu目录名

或

\uuuu文件名

也将不同。