是否可以在不使用查询字符串的情况下传递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() 
    ], 
};