是否可以在不使用查詢字符串的情況下傳遞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() 
    ], 
};