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.htmlmain. package.json该应用程序可以正常工作,但是当我编辑文件时,HMR 不会发生。为什么它在浏览器中工作时在 NW.js 中不起作用?

4

1 回答 1

1

tl;博士

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

详细(幕后)

正如Webpack 1Webpack 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 回答