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设置为main中package.json属性的入口点。应用程序正常工作，但是当我编辑文件时，HMR并没有发生。为什么它在NW.js中在浏览器中工作时不起作用？

Answer 1

TL;博士

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

详情（幕后）

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

在webkit中编译使用，使用jsonp chunk加载，但也支持build.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 ];

Webpack HMR不能与Node-Webkit / NW.js

我拥有什么

问题

1 个答案:

TL;博士

详情（幕后）

多个目标