How do you upgrade webpack-dev-server from v3 to v4?

Question

I have been struggling with an issue with hot reloading where making edits in certain files would reload the app without those changes.

My initial solution was to update webpack and related modules. The first module I updated was webpack-dev-server. I went from v3 to v4 which immediately broke the app. All images and json files were getting 404'd when running the dev server. Here is the original package.json:

{
  ...
  "scripts": {
    "dev": "set NODE_ENV=development && webpack serve --config config/webpack.dev.js --open",
    "build": "set NODE_ENV=production && webpack --config config/webpack.prod.js",
    "beatmarkers": "babel-node fetchAndFormatData/fetchAndFormatBeatMarkers.js"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.3",
    "@babel/core": "^7.14.3",
    "@babel/node": "^7.14.2",
    "@babel/preset-env": "^7.14.4",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "lodash.clonedeep": "^4.5.0",
    "node-fetch": "^2.6.1",
    "node-sass": "^6.0.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "bezier-easing": "^2.1.0",
    "howler": "^2.2.3",
    "pixi.js": "^6.2.0"
  }
}

Here are the original webpack config files:

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

module.exports = {
  entry: './src/app.js',
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/template.html')
    })
  ],
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg|ico|pvr|mp3|fnt)$/,
        type: 'asset/resource'
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

const { merge } = require('webpack-merge');

const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    historyApiFallback: true,
  },
  output: {
    publicPath: '/'
  },
  devtool: "source-map"
});

This configuration produces a sources structure in chrome that looks like this:

localhost:8080
    main.js
    (index)
    assets/images
        animations
        fonts
        interface

When I updated webpack-dev-server to the latest version, 4.11.1, the assets/images folder no longer exists. I haven't be able to figure out how to get it back. Any help would be deeply appreciated.

How do you upgrade webpack-dev-server from v3 to v4?

0 Answers0