Why does WebPack Dev Server open a dev server on a physical basis?

Question

webpack

It is not known for what reason WebPack Dev Server began to contact the production build. That is, it raises the server directly from the physical folder, although it should generate everything in memory, as far as I know. The most interesting thing is that live-reload works on absolutely all pages, but nothing is updated (not even css), because. the target file in the physical folder is not updated. If we delete the folder with the build, we will see a beautiful picture:

The configuration file is configured so that everything worked fine before. Here is the code:

const PATHS = {
  app: path.join(__dirname, '../app'),
  dist: path.join(__dirname, '../dist'),
  assets: 'assets/'
}

 entry: {
    app: PATHS.app,
    personal: `${PATHS.app}/personal.js`
  },
  output: {
    filename: `${PATHS.assets}js/[name].js`,
    path: PATHS.dist,
    publicPath: '/'
  },

I have been working with WebPack recently, a beginner, searches on the Internet did not give anything sensible. I even saw a similar question here on the Toaster, but I did not find a solution. What could be the reason? Thank you!

Answer 1

The problem turned out to be painfully banal, but not obvious. In the plugins, in the definition of the final path for the file, I forgot to specify a dot. The build function understood everything correctly and did everything as it should, while the dev server needed a relative path. Let's look at a live example:

...PAGES.map(page => new HtmlWebpackPlugin({
      template: `${PAGES_DIR}/${page}`,
      filename: `(вот она красивая, никогда не забывайте ее) => ./${(page == 'index.pug') ? '' : page.replace(/\.pug/, '')+'/'}index.html`,
      inject: 'head',
      excludeAssets: [/personal.*.js/],
      hash: false
    })),