Cfrgtkky

I'm planning to develop wordpress plugins integrating VueJS functionalities. The general idea would be to set up a dev environment where I start a project with vue-cli in the main folder of the plugin.
When the css/js files are generated, I can enqueue the files using the wp_enqueue_scripts hook in the plugin php main file.

This approach has two drawbacks:

1) No hot reload is possible since the page where the plugin is consumed is different from the one served by the webpack environment (webpack_dev_server)

2) In order to have static assets (images, fonts) correctly addressed in the generated JavaScript, I need to specify the final path of my plugin as the baseUrl parameter, like this:

//vue.config.js



module.exports = {

  baseUrl: 'wp-content/plugins/VuePress/dist/', // <<--- hardcoded path

  productionSourceMap: false,

  filenameHashing: false,

  lintOnSave: true,



  transpileDependencies: [

    /bvue-awesomeb/

  ],



  outputDir: undefined,

  assetsDir: undefined,

  runtimeCompiler: undefined,

  parallel: undefined,

  css: undefined

}

While the first point is annoying but not blocking, the second represents a serious drawback: The baseUrl is "hardcoded", which means that if the plugin lands in some fancy wp installation where the plugins are not in the standard location, then the static assets links will break.

I've thought of a hack: I could use a fake path as baseUrl (like baseUrl: '__FAKEPATH__/'), and when the plugin is activated I could open the webpack generated js bundle, preg_replace the FAKEPATH and write the modified content (with the correct path) back to its destination, like this (pseudo code):

$js = file_get_contents( __DIR__ . '/js/webpack_bundle.js' );

$js = preg_replace( "__FAKEPATH__/", __DIR__ . "/dist/", $js );

file_put_contents( __DIR__ . '/js/webpack_bundle.js', $js  );  

Any better idea to address these two point would be greatly appreciated