I am working in a vue project that is a monorepo there a a few vue projects in this monorepo that are going to need to store similar or the same data in a vuex store.

I have an idea of making a vuex store package something like,

-packages
    - store
       - modules
           - profile
               - actions.js
               - types.js
               - getters.js
               - mutations.js
               - index.js

My plan is then in another package in it's store index.js file to be able to do,

import profileStore from '@mypackage/profile';

Basically 1 or more packages in my monorepo may need the facilities of the profile store so it would nice to be able to import it from a shared area.

My question is how in my store package do I compile my store code so I am import like the above, my webpack config currently looks like this,

const path = require("path")

module.exports = {
  entry: path.resolve(__dirname, "src/index.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
  mode: "development",
}

I was hoping that above would move the src files to a dist folder, and then I would have entry point of index.js

that would do something like,

import profileStore from './profileStore'

export {profileStore}

Am I going down completely the wrong path?