1.0.1 • Published 6 years ago

@khoifish/share-loader v1.0.1

Weekly downloads
371
License
MIT
Repository
github
Last release
6 years ago

npm npm MIT licensed

yarn add share-loader --save-dev

Webpack config of the core/host application

module: {
  rules: [
    {
      test: /\.js?$/,
      use: [
        {
          loader: 'share-loader',
          options: {
            modules: ['@material-ui/core', 'react', 'react-dom'],
            namespace: 'some-name-space',
          },
        },
      ],
    },
  ]
}

Webpack config of consumer apps

const { Externals } = require('share-loader')

externals: [
  Externals({
    namespace: 'some-name-space',
    modules: ['@material-ui/core', 'react']
  })
],
output: {
  library: ['some-name-space', packageJson.name],
  libraryTarget: 'umd'
}

You can see your shared dependencies in the Window object under the namespace variable you declared in your Webpack config.

dependencies in global scope gif

core-app

  1. In the root folder, cd into core-app
  2. Run yarn install
  3. Run yarn dev
  4. This will spin up a local dev server on localhost:1234

feature-app

  1. In a seperate terminal window, cd into feature-app
  2. Run yarn install
  3. Run yarn serve
  4. This will spin up a local server on localhost:4567 and allow you to access the built JS file via localhost:4567/feature-app.js
  5. There is also a yarn dev command to allow you to make whatever changes you need.

Combining the Two

  1. Go to localhost:1234
  2. Click on Feature 1 in the top nav bar
  3. Watch as core-app pulls in feature-app.js and dynamically loads the page (you can see this in your browser's network tab)

Notes

  • If you make changes in the feature app and they are not being reflected in the core app, make sure you disable caching in your browser's console.