javascript - 是否可以在不使用查询字符串的情况下传递 webpack 条目配置选项？

Question

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

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

还有一个条目，如下所示:

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