0

我有的

我使用以下配置文件创建了一个小型 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(),
  ],
};

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

问题

我通过 npm安装了 NW.js（Node-Webkit），并将其设置index.html为main. package.json该应用程序可以正常工作，但是当我编辑文件时，HMR 不会发生。为什么它在浏览器中工作时在 NW.js 中不起作用？

4

1 回答 1

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 文档是如何做到的：

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 ];
于 2017-02-24T18:42:59.100 回答