1

所以我有以下用于热重载的 webpack 服务器配置：

const compiler = webpack(dev);
const settings = middleware(compiler, {
    publicPath: dev.output.publicPath,
    path: `/__webpack_hmr`,
    quiet: true
});

entry看起来像这样：

entry: [
    './src/app.js',
    'webpack-hot-middleware/client?reload=true'
],

现在最初我有这个：

const compiler = webpack(dev);
const settings = middleware(compiler, {
    publicPath: dev.output.publicPath,
    path: `/__webpack_hmr`,
    quiet: true,
    reload: true
});

和

 entry: [
    './src/app.js',
    'webpack-hot-middleware/client'
 ],

但是在webpack-hot-middleware上创建问题后，我从开发人员那里得到了这条评论，解释说查询字符串格式将配置应用于客户端，而其他格式将其应用于服务器。

我的问题是，有没有办法应用reload=true不使用查询字符串，我发现这种格式真的很难遵循并且难以跟踪。

4

1 回答 1

0

查看他们的文档，没有明确的支持。话虽这么说，查看他们的代码，似乎可以传递一个函数，该函数返回您当前传入的格式的数组，但是在测试中我无法生成这个。另一种方法是定义并运行您的辅助函数。你可以使用这样的助手：

function buildEntries(entries) {
  return entries.map(function(entry) {
    if (typeof entry === 'object') {
      var options = '?';
      if (entry.options) {
        for (var option in entry.options) {
          if (entry.options.hasOwnProperty(option)) {
            options += option + '=' + entry.options[option];
          }
        }
      }
      return entry.base + options.slice(0, -1);
    }
    // In all other cases
    return entry;
}

然后像下面的完整示例一样使用它：

var webpack = require('webpack');

function buildEntries(entries) {
  return entries.map(function(entry) {
    if (typeof entry === 'object') {
      var options = '?';
      if (entry.options) {
        for (var option in entry.options) {
          if (entry.options.hasOwnProperty(option)) {
            options += option + '=' + entry.options[option];
          }
        }
      }
      return entry.base + options.slice(0, -1);
    }
    // In all other cases
    return entry;
}

module.exports = {
  context: __dirname,
  entry: buildEntries([
    {
      base: 'webpack-hot-middleware/client',
      options: {
        path: '/__webpack_hmr',
        timeout: 20000
      }
    },
    './client.js'
  ]),
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  devtool: '#source-map',
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
};
于 2017-03-01T08:16:43.720 回答