The error you get is:
[webpack-cli] TypeError: ManifestPlugin is not a constructor
You are trying to load weback-manifest-plugin it like this:
const ManifestPlugin = require("webpack-manifest-plugin")
How it should be loaded
Looking at the documentation for webpack-manifest-plugin, it should be loaded like this:
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
So change that row, and then also replace:
new ManifestPlugin({ publicPath: "" })
with:
new WebpackManifestPlugin({ publicPath: "" })
Now it should work!
The bigger problem
I see that you are loading everything as dependencies
, while most of them should be loaded as devDependencies
.
A dependency is something that will be bundled in your code, and loaded by the browser who visits your website.
A dev dependency is something that you are using in your build process, and it’s not being bundled with the JS that ends up on your website.
Think of devDependencies as software tools you use to build the website. Almost the same way as VS Code or whatever editor you are using. It’s software needed for the project, but every visitor to your website does not need to download VS Code to their computer just to view your website.
These are some of the libraries that should be devDependencies:
@babel/core
@babel/preset-env
@babel/preset-react
autoprefixer
Most of them have this written in the documentation. See:
https://github.com/postcss/autoprefixer#using-environment-variables-to-support-css-grid-prefixes-in-create-react-app
The installation instructions say:
npm install autoprefixer@latest cross-env --save-dev
The --save-dev
flag is what puts it in devDependencies
rather than dependencies
. This will have a big effect on the bundle size when you are building the project.
Read more on npmjs.com, about dependencies and devDependencies.
The other big problem
You are loading things such as axios
, jquery
, normalize.css
. When you bundle them like this, WordPress is unaware they they are bundled, and if you are using a plugin that also needs jquery
, that plugin will load jquery one extra time. This can lead to errors for the user.
Instead you should use wp_enqueue_script
for anything that WordPress should be aware of.
By using this function, you can tell WordPress what version of a dependency you are loading, and other scripts that might be depending on that library can have that as a dependancy, making sure things load in the right way, and only once.
There is a really nice guide on how to include CSS and JavaScript in WordPress. Bundle your own JS and CSS, and enqueue those using the correct WordPress functions, but any external libraries, such as jQuery
, axios
, glide
etc, add them in a way so that WordPress is aware of them.