'Cannot GET /' when using webpack5 server with WordPress

I've inherited sites that look to have quite bloated, old, webpack configs. Having had no previous experience of Webpack for future builds I wanted to try and create something a bit more lightweight and understandable for me, which includes webpack-dev-server

The current package.json files I am expected to use as boilerplates contain many outdated dependancies and gaining answers about why or what these are is limited for me.

What I have done so far

I have been able to get the watch command sorted and it appears to be starting up. I've yet to test if is watching for changes yet but in the meantime I have moved onto start as even with my older/inherited webpack configs I have never been able to get it to work with webpack-dev-server.

Currently, I have a webpack.config.js file and merge that with webpack.dev.js when running npm run start.

WordPress, which is what all the sites are running, is served from ./dist. Meaning your standard WP file structure/setup can be found in here.

Once webpack has processed it's files (js/sass/css) they are placed in ./dist/resources.

Currently, as I am only setting up a boilerplate, the WP theme just contains an index.php with some basic HTML in it.

If I set devServer.static.publicPath to / what I get is the directory structure of ./dist (WP root).

If I set devServer.static.publicPath to /wp-content/themes/wp-boilerplate I get Cannot GET /.

Where might I be going wrong on this?

// webpack.config.js
const path = require('path');
const postcssPresetEnv = require('postcss-preset-env');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

const rootOutputPath = path.resolve(__dirname, 'dist');
const outputPaths = {
  js: 'resources/js',
  css: 'resources/css',
};

module.exports = {
  entry: {
    app: './src/entries/app.entry.js',
  },
  output: {
    filename: `${outputPaths.js}/[name].bundle.js`,
    chunkFilename: `${outputPaths.js}/[name].chunk.js`,
    path: rootOutputPath,
    clean: true,
  },
  plugins: [
    // Copy images to dist folder
    // These are not processed by webpack
    // https://webpack.js.org/plugins/copy-webpack-plugin/
    new CopyPlugin({
      patterns: [
        {
          from: './src/images',
          to: 'resources/images',
        },
      ],
    }, {
      ignore: ['*.DS_Store', '*.gitkeep', '*.gitignore', '*.git', '.keep'],
    }),
    // Extract CSS to separate files
    // https://webpack.js.org/plugins/mini-css-extract-plugin/
    new MiniCssExtractPlugin({
      filename: `${outputPaths.css}/[name].bundle.css`,
      chunkFilename: `${outputPaths.css}/[id].bundle.css`,
      ignoreOrder: false,
    }),
    // Lint JS files
    // https://webpack.js.org/plugins/eslint-webpack-plugin/
    new ESLintPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          // https://webpack.js.org/loaders/babel-loader/
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: 'defaults'
                }
              ]
            ]
          }
        }
      },
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  postcssPresetEnv(),
                ],
              },
            },
          },
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                './src/scss/settings/*.scss',
                './src/scss/tools/**/*.scss',
              ],
            },
          }
        ],
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

// webpack.dev.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
      publicPath: '/wp-content/themes/wp-boilerplate/',
    },
    compress: false,
    allowedHosts: 'all',
    open: true,
  }
};

// package.json
{
  "name": "wp-boilerplate",
  "version": "1.0.0",
  "description": "wp-boilerplate",
  "main": "index.js",
  "private": true,
  "scripts": {
    "start": "webpack serve --config webpack.config.js --config webpack.dev.js --merge",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --config webpack.config.js --config webpack.dev.js --merge --watch"
  },
  "repository": {
    "type": "git",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.2",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "eslint": "^8.36.0",
    "eslint-webpack-plugin": "^4.0.0",
    "mini-css-extract-plugin": "^2.7.3",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-preset-env": "^8.0.1",
    "sass": "^1.59.3",
    "sass-loader": "^13.2.0",
    "sass-resources-loader": "^2.2.5",
    "style-loader": "^3.3.2",
    "webpack": "^5.76.1",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.12.0"
  }
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/8jUhGH5