webpack-dev-server didn't refresh the page

Question

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...

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.
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.

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 needed to clarify the situation. Thanks.

webpack-dev-server didn't refresh the page

0 Answers