有没有可能在不使用查询字符串的情况下传递webpack条目配置选项？

Question

所以我有如下的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上创建了一个问题后，我从开发人员那里得到了这个comment，解释说查询字符串格式将配置应用于客户端，而另一种格式将其应用于服务器。

我的问题是，有没有一种方法可以不使用查询字符串来应用reload=true，我发现这种格式很难理解，也很难跟踪。

Answer 1

纵观their documentation，没有明确的支持。也就是说，通过their code可以传递一个函数，该函数返回当前传入的格式的数组，但是在测试中我无法生成此函数。另一种方法就是定义并运行你的助手函数。您可以使用这样的帮助器：

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()
  ],
};