CODEWITHSUNDEEP
javascriptnode.jswebpack
vir us
vir us

Reputation: 10765

include bundle compiled with webpack to use in another js file

I have the following structure of my app:

index.js

const app = require("./app")
exports.api = app(...)

app.js

//all the imports goes here
//and exporting the main function
module.exports = app => {...}

Now I need to bundle app.js with webpack but index.js must stay intact

The question is, after bundling the app.js, how can I require it's main function app from index.js?

After webpacking app.js I'm getting error in index.js that says "app is not a function" which makes sense since app.js content is now wrapped in webpack staff.

Any suggestions are much appreciated.

Upvotes: 2

Views: 1531

Answers (2)

felixmosh
felixmosh

Reputation: 35613

Your "app" bundle needs to be exported as a commonjs.

module.exports = {
  //...
  output: {
    library: 'app',
    libraryTarget: 'commonjs',
  }
};

The return value of your entry point will be assigned to the exports object using the output.library value. As the name implies, this is used in CommonJS environments.

So, in your index.js you can require('./dist/bundle-name.js').

Upvotes: 3

vir us
vir us

Reputation: 10765

seems to be a hack, but I made it work by adding an intermediate file and adjusting app.js and index.js like below:

index.js

const app = require("./bundle").app //changed to named import
exports.api = app(...)

bundle.js //an intermediate file which is now an entry point for webpack

import app from "./app"
exports.app = app

app.js

//all the imports goes here
//and exporting the main function
export default app => {...} //changed to default export

If anyone has explanation on why it works this way and how to simplify it without adding that bundle.js file, you are very welcome to comment!

Upvotes: 1

Related Questions