webpack-dev-server didn’t refresh the page

Issue

This Content is from Stack Overflow. Question asked by hyh

I’m a noob trying to use webpack-dev-server for development on this multi-entries webpack v5 project. All of the compiled output are under the folder of “dist”.
Here is my setting in webpack.config


const config = {
  mode: 'development',

  target: 'web',

  entry: batch.entry,

  output: {
    publicPath: '/dist/', 
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name]/[name].js',
  },

  module: {
    rules: [
      {
        test: /.(js|jsx)$/i,
        loader: 'babel-loader',
      },
      {
        test: /.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: 'asset/resource', 
        generator: {
          filename: 'static/[hash][ext][query]',
        },
      },
    ],
  },
  devServer: {
    hot: true, 
    port: 5004, 
    liveReload: true    
    watchFiles: ['dist/**/*'],
    devMiddleware: {
      publicPath: '/dist/',
    },
    static: {
      directory: path.resolve(__dirname, 'dist'),
      watch: true,
    },
    open: ['./dist/html/layout/layout.htm'],
  },

  optimization: {
    runtimeChunk: 'single', 
  },
};

module.exports = () => {
  return config;
};

And here are the issues that I encountered…

  1. When I set the configs just like above, the page didn’t get refreshed, so the page conducted the old code then the new code.
  2. After updating the publicPath of output, the refresh fn works as it should.
output: {
    -publicPath: '/dist', 
    +publicPath: '/dist/', 
  },

However right now the paths of my svg and ttf just get concatenated without “/” and all of fontawesome icons do not show

GET http://localhost:5004/diststatic/491974d108fe4002b2aa.ttf
GET http://localhost:5004/diststatic/8751ddd8d424faecfa6f.svg

And at the same time the image is still on the right path

<img style="width: 400px;object-fit: contain;" src="/dist/static/0bde0707c00b6b3ef5f6.jpg" alt="">

I’ve tried to make the filename of this category starting with “./” but then the path became http://localhost:5004/dist/./static/491974d108fe4002b2aa.ttf so this is another dead end.

{
  test: /.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
  type: 'asset/resource', 
  generator: {
    -filename: 'static/[hash][ext][query]',
    +filename: './static/[hash][ext][query]',
    },
},

Because I’ve not seen any posts of talking about the same issue, so maybe I neglect and misunderstand some of the essential setting for this?
Let me know if anymore information is need to clarify the situation. Thanks.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?