时间戳

首页 > 解决方案 > Webpack 如何使用 Target 属性

node.js - Webpack 如何使用 Target 属性

问题描述

我是 Webpack 的新手，我正试图弄清楚目标的实际作用。

在文档中，Webpack 说：

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

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

但它非常抽象，并没有说明实际的区别是什么。

我注意到如果在节点模式下使用 webpack-server 运行 webpack 配置文件，我会得到错误required is not defined，而如果我只是使用 webpack 导出文件然后独立运行文件，它运行良好。目标是否仅适用于 webpack 开发服务器？

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”并从后端运行它。与目标“节点”没有区别。它运行得很好。我看不出该属性的用途

标签： node.jswebpack

解决方案

一个非常简单的例子是，

假设您正在创建一个React应用程序，它是一个客户端应用程序，将在浏览器上运行。您将目标设置为web. （这是默认的）

如果假设它是一个后端应用程序，比如一个快速应用程序，它不会在浏览器上运行，而是从node自身启动。因此，您将目标设置为node. 它使用 Node.jsrequire加载块，而不涉及任何内置模块，如fs或path.

请参阅此处了解更多选项。还有compare-webpack-target-bundles一个很好的资源，用于测试和查看不同的 webpack 目标。也非常适合错误报告。

推荐阅读