README: client per entry vs single client per all entries about webpack-hot-client HOT 14 CLOSED

Ah, OK. Using chunks that way isn't something we anticipated. I believe the typical route there is to export an array of compiler configs, so that's not one I saw coming. We'll need to implement a new feature to allow for that. Probably an allEntries boolean option that will apply it to all entries in a compiler. I'm going to wager that won't be frequently used, but the use-case is there and is solid.

In the mean time, you can configure that manually. If you get stuck let me know and I'll help there. It's likely going to be at least two weeks until that feature will land.

from webpack-hot-client.

@taikn please see #64 and #65

from webpack-hot-client.

Thanks for the issue 🍺

In the future, please don't remove portions of the issue template. They might be redundant or not needed for a particular issue, but it's better to put "n/a" or leave sections blank.

What you're requesting is actually an anti-pattern that will cause all kinds of issues. You truly only need one client entry script per bundle, as it's self-executing. I'd need to know more about your use-case to be able to definitively say that it's bad, or that it's good and that there's something that could be changed. Because we're using WebSockets, you only need one client per-bundle, or if you're putting all bundles on a single page/html file, you only need one client period. That's the benefit.

You can also make use of the autoConfigure option and configure the client entries and HotModuleReplacementPlugin manually.

from webpack-hot-client.

👌 My use case is actually pretty simple, I have two entry points resulting in two separate pages - lets call these page A and page B, now when I work with the page A - Websocket is connected and updates are flawlessly delivered to the browser, while accessing page B works as expected, doing some changes to the actual code leaves me pretty much hitting CMD+R in the browser to see the updates.

from webpack-hot-client.

Interesting. Can you paste your webpack config?

from webpack-hot-client.

For my webpack config I am utilising composable configuration described in Juho's Webpack Book.
There is webpack.parts.js where the small function-based interfaces are defined and amongst them
function to initialise pages:

...

const HtmlWebpackPlugin = require('html-webpack-plugin')

exports.page = ({
    path = '',
    template = require.resolve(
      'html-webpack-plugin/default_index.ejs'
    ),
    title,
    entry,
    chunks
  } = {}
) => ({
  entry,
  plugins: [
    new HtmlWebpackPlugin({
      chunks,
      filename: `${path && path + '/'}index.html`,
      template,
      title
    })
  ]
})

...

And then there is a higher level configuration stored in webpack.config.js,
where the final config is being merged based on env variable

const path = require('path')
const merge = require('webpack-merge')
const parts = require('./webpack.parts')

...

const PATHS = {
  src: path.join(__dirname, 'src')
}

const commonConfig = merge([ ... ])
const productionConfig = merge([ ... ])
const developmentConfig = merge([ ... ])

...

module.exports = () => {
  const mode = process.env.NODE_ENV

  const pages = [
    parts.page({
      title: 'Page A',
      entry: {
        pageA: [
          'babel-polyfill',
          'blueimp-canvas-to-blob',
          'whatwg-fetch',
          PATHS.src
        ]
      },
      chunks: ['pageA', 'manifest', 'vendor'],
      template: 'template.html'
    }),
    parts.page({
      title: 'Page B',
      path: 'lp',
      entry: {
        pageB: [
          'babel-polyfill',
          path.join(PATHS.src, 'lp.js')
        ]
      },
      chunks: ['pageB', 'manifest', 'vendor'],
      template: 'template.html'
    })
  ]

  const config =
    mode === 'production'
      ? productionConfig
      : developmentConfig

  return merge([commonConfig, config, { mode }].concat(pages))
}

from webpack-hot-client.

OK can you paste what the result of that merge is for the development env? That's what I'll need to see to grasp what you're trying to accomplish.

from webpack-hot-client.

sure, this is how merged result looks like:

{
  output: {
    path: '/.../build',
    publicPath: '/'
  },
  resolve: {
    modules: ['/.../src', 'node_modules']
  },
  module: {
    rules: [[Object], [Object], [Object]]
  },
  plugins: [{ apply: [Function: apply] },
    DefinePlugin { definitions: [Object] },
    CircularDependencyPlugin { options: [Object] },
    HtmlWebpackPlugin { options: [Object] },
    HtmlWebpackPlugin { options: [Object] }],
  devtool: 'source-map',
  serve: {
    add: [Function: add]
  },
  mode: 'development',
  entry: {
    pageA: [
      'babel-polyfill',
      'blueimp-canvas-to-blob',
      'whatwg-fetch',
      '/.../src'
    ],
    pageB: [
      'babel-polyfill',
      '/.../src/lp.js'
    ]
  }
}

where options for the first HtmlWebpackPlugin entry look like:

options: {
  template: 'template.html',
  filename: 'index.html',
  hash: false,
  inject: true,
  compile: true,
  favicon: false,
  minify: false,
  cache: true,
  showErrors: true,
  chunks: ['pageA', 'manifest', 'vendor'],
  excludeChunks: [],
  chunksSortMode: "auto",
  meta: {},
  title: "Page A",
  xhtml: false
}

from webpack-hot-client.

OK and I'm assuming the second HtmlWebpackPlugin works with chunks: ['pageB'.... - is that correct?

from webpack-hot-client.

Precisely!

from webpack-hot-client.

I would certainly give it a try! I guess, I should start by setting the autoConfigure flag to false and then manually injecting the HotModuleReplacementPlugin/client as you've mentioned above, the only thing is - I am a bit lost. I can add the HotModuleReplacement plugin to the dev config of the webpack.config.js, but how would the client entry look like, so that webpack-hot-client can actually pick it up? I would really appreciate if you can point me in the right direction.

from webpack-hot-client.

Your entry should look like this:

`webpack-hot-client/client?compilerName`

from webpack-hot-client.

Thanks! It worked! Besides adding client entry I also had to add __hotClientOptions__ with an options object via webpack.DefinePlugin otherwise it was throwing an error - is this the right way to do it?

from webpack-hot-client.

Oh nice catch! That's actually a bug! That is the right way to do it, but that portion of the code shouldn't be affected by the autoConfigure option.

from webpack-hot-client.