Webpack HMR 不适用于 Node-Webkit/NW.js答案

【问题标题】：Webpack HMR doesn't work with Node-Webkit/NW.jsWebpack HMR 不适用于 Node-Webkit/NW.js
【发布时间】：2023-03-23 00:23:01
【问题描述】：

我有什么

我使用以下配置文件创建了一个小型 Webpack HMR Hello World：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: path.join(__dirname, 'app/index.js'),
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      },
    ],
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
  ],
};

然后我从一个 npm 脚本运行 webpack-dev-server 并在 http://localhost:8080/app.js 下提供文件。我将此文件包含在我的 index.html 中，并且所有内容（包括 HMR）在浏览器中都可以正常工作。

问题

我安装了 NW.js (Node-Webkit) via npm 并将此 index.html 设置为 package.json 中 main 属性的入口点。该应用程序可以正常工作，但是当我编辑文件时，HMR 不会发生。为什么NW.js在浏览器中运行却无法运行？

【问题讨论】：

标签： javascript webpack node-webkit webpack-hmr hot-module-replacement

【解决方案1】：

tl;博士

将target: 'node-webkit', 添加到您的webpack.config.js。

细节（幕后）

正如Webpack 1 和Webpack 2 文档所示，您必须设置target 配置选项，因为不同的环境工作方式不同。例如，对于 node-webkit 选项，文档指出：

编译在 webkit 中使用，使用 jsonp 块加载，但也支持构建 node.js 模块加上 require(“nw.gui”)（实验性）

另外，对于node，它指出：

在上面的示例中，使用 node webpack 将编译以在类似 Node.js 的环境中使用（使用 Node.js 需要加载块并且不接触任何内置模块，如 fs 或 path）。

多个目标

请记住，由于这些差异，在您将node-webkit 设置为目标后，网络版本将无法在您的浏览器中运行。如果你想在这两种环境中开发，你必须通过引入多个配置和它们自己的输出来创建一个同构库。 Webpack 2 Multiple Targets documentation 是如何做到的：

var path = require('path');
var serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

var clientConfig = {
  target: 'web', // <=== can be omitted as default is 'web'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];

【讨论】：