How to configure webpack dev server for use with wordpress?


#1

I am trying to create wordpress theme based on vue webpack template. I have scaffolded a project using vue cli, inside my themes directory, and enqueued scripts in wordpress.

My local site is in at http://localhost/vuewptest/wp-content/themes/testtheme/
Production site will be on a separate domain, like https://eanka.com/, so project path will be https://eanka.com/wp-content/themes/testtheme/

For production
I have altered webpack.prod.conf.js, and removed hashes, to be able to enqueue files in production like /dist/static/js/manifest.js, /dist/static/js/vendor.js, /dist/static/js/app.js. I am not sure if this is the right way to do it (I feel bad about removing hashes), but I have no better idea - please let me know if you know how it can be acomplished with hashed names.

For development
This is where I have the biggest problem. I did enqueue the script from http://localhost:8080/app.js. Still, I am using vue-router, and it automatically tries to include chunks from http://localhost/ (like http://localhost/0.js and so on) - and it doesn’t work. When I set dev.assetsPublicPath to http://localhost:8080 it works (it’s using this path to load chunks), but then I have no possiblity to include assets (I’ve got some images at wp-content/uploads/). I tried to use proxy table to include those assets, but it doesn’t work.

I am not really sure how to configure it. Any help?


#2

What exactly does enqueue mean?

I assume your Wordpress project is SSR (server side rendering) and you do not use a (SPA) single page application. Is that true? There are some projects out there to use WP with VueJS but it doesn’t include VUE-CLI approach.

The hashes in filenames are automatically inserted into index.html file every time you build for production but in your case I assume you are not using the index file at all.


#3

enqueue is wordpress method to include js scripts into pre-rendered html. I need to pass the path to script to this method - so I removed hashes.
Wordpress is server side, but I am going to use it merely as a data source and admin backend. It has got a rest api, so I should be able to use this as a data source for my theme, and the theme is going to be a SPA