Using a bundled file from another project with webpack

Can you take an output file bundled in another project and use it in a different frontend framework such as React? Of course, the whole point of modularization is to make this possible, but every now and then you need to work alongside legacy code. If you use craco, it’s simple.

Configure craco.config.js as follows.

module.exports = {
  webpack: {
    module: {
      rules: [
        {
          test: /\host.three.js$/, // specify the js file to import in test, and
          use: 'bundle-loader' // set the rule to use bundle-loader
        }
      ]
    }
  }
}

Import it in your JavaScript as follows.

import HOST from '../../host.three'

Now you can use the bundled js file.

20211024