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

Question

我有什么

我使用以下配置文件创建了一个小型 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 设置为 [=17] main 属性的入口点=].该应用程序工作正常，但当我编辑文件时，HMR 不会发生。为什么它在 NW.js 中可以在浏览器中运行却无法运行？

Answer 1

tl;博士

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

详细（幕后）

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

Compile for usage in webkit, uses jsonp chunk loading but also supports build in node.js modules plus require(“nw.gui”) (experimental)

此外，对于 node，它指出：

In the example above, using node webpack will compile for usage in a Node.js-like environment (uses Node.js require to load chunks and not touch any built in modules like fs or 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 ];

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

Webpack HMR doesn't work with Node-Webkit/NW.js

javascript

node-webkit

webpack

webpack-hmr

hot-module-replacement

我有什么

问题

tl;博士

详细（幕后）

多个目标