Webpack-dev-server: devServer.public not used by hot-update.json

[yamsellem]

• Operating System: debian stretch
• Node Version: 6.11.1
• NPM Version: 3.10.10
• webpack Version: 4.27.0

• webpack-dev-server Version: 3.1.10

• [x] This is a bug

• [ ] This is a modification request

Configuring devServer.public to a custom domain only updates the hot-reload socket GET calls, but not the hot-modules GET calls. It seems that there are no ways to configure the later.

And no output.hotUpdateMainFilename nor hotUpdateChunkFilename do allows absolute path.

Code

'use strict';

const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, '..', dir);
}

const env = process.env.NODE_ENV === 'production' ? 'production' : 'development';

module.exports = {
  mode: env,
  target: 'web',
  output: {
    publicPath: '/',
    path: path.resolve(__dirname, './build'),
    filename: '[name].js',
    hotUpdateMainFilename: '__hmr/[hash].hot-update.json',
    hotUpdateChunkFilename: '__hmr/[id].[hash].hot-update.js'
  },
  devtool: env === 'production' ? false : 'eval-source-map',
  resolve: {
    extensions: ['.js', '.vue', '.json']
  },
  devServer: {
    hot: true,
    hotOnly: true,
    inline: true,
    host: '0.0.0.0',
    public: 'hotreload.dev',
    port: 80,
    disableHostCheck: true,
    quiet: true
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      WEBPACK_ENV: JSON.stringify(env)
    }),
    new VueLoaderPlugin(),
    // extract css into its own file
    new MiniCssExtractPlugin({
      filename: 'css/[name].[chunkhash].css',
      chunkFilename: 'css/[id].[chunkhash].css'
    })
  ]
};

Expected Behavior

Webapp should be served from http://localhost
Sockjs should be served from http://hotreload.dev/sockjs-node/info?t=1544113470603
Websocket should be served from ws://hotreload.dev/sockjs-node/571/zjz3ymti/websocket
HMR should be served from http://hotreload.dev/__hmr/e70392ebad328cc520e6.hot-update.json

Actual Behavior

Webapp is served from http://localhost
Sockjs is served from http://hotreload.dev/sockjs-node/info?t=1544113470603
Websocket is served from ws://hotreload.dev/sockjs-node/571/zjz3ymti/websocket
HMR is served from http://localhost/__hmr/e70392ebad328cc520e6.hot-update.json

For Bugs; How can we reproduce the behavior?

webpack-dev-server --config webpack.conf.js --hot --progress -d

[alexander-akait]

PR welcome

[yamsellem]

@evilebottnawi thanks for your quick answer. The speed of your answer made me consider this is a known issue, is this?

[alexander-akait]

@yamsellem not sure it is bug, i think it is feature, a lot of issue and PRs, hard to say

[yamsellem]

@evilebottnawi ok, I take a look of how it can be done. Are we agree that the devServer.public should also change the __hmr domain from where the hot-updates files are served?

[alexander-akait]

@yamsellem not sure, need look code, feel free to send a PR and we will find

[tseho]

@yamsellem I had the same issue as you and I found out the urls for hot-update.json are using the output.publicPath, not the devServer.publicPath.

In our project, we have no issue using output.publicPath for webpack in dev.

The code responsible for the path generation is there: webpack/lib/MainTemplate.js, called from webpack/lib/web/JsonpMainTemplatePlugin.js.

I haven't been further, I hope you can find a solution too.

[rcreasi]

Any movement on this issue? Unfortunately it's not possible for me to use output.publicPath due to some particulars of my project's configuration.

[rcreasi]

I specifically need the hot files to be served from a separate domain. The code that @tseho linked to above shows where the filename is generated but not where the domain part of the url comes from.

I did some of my own digging and it appears the domain is hardcoded in the runtime ($require$.p gets interpolated as __webpack_require__.p which maps to the bundle public path).

[nicksyndicate]

Helped this, but it isn`t good solution.

    devServer: {
      writeToDisk: true,

I have standalone backend and WDS need only for serving hot-updates. WDS want to get hot-update from backend server

[alexander-akait]

Somebody can create minimum reproducible test repo?

[alexander-akait]

Close in favor https://github.com/webpack/webpack-dev-server/issues/1385