2

I have two project using webpack. Now I want to bring one project as module of other project. I can get the two bundle created but don't know how to import from the other bundle.

Elaborating a bit:- Lets say the other file from which i want to import looks like as follows:-

index2.js (Bundled as bundleTwo)

import SomeCompoent from "./components/SomeCompoent/SomeCompoent";
module.exports = {SomeCompoent}

and in the file (is in another bundle - bundleOne) below I want to import the component (somecomponent):-

index1.js (in bundleOne)

import {SomeCompoent} from "bundleTwo";

but here bundleTwo is undefiend

Any help is highly appreciated

  • I have the same issue, any help? – Islam Shaheen Mar 14 '17 at 8:27
  • I answered it.. – VISHAL DAGA Mar 14 '17 at 9:47
2

One way that I have figured out myself, is that using alias this can be achieved.

To make this line import {SomeCompoent} from "bundleTwo"; work, bundleTwo can be defined in alias :-

 config:{
     resolve: {
        alias: {
          "bundleTwo": path.join(__dirname, "<path_to_the_bundleTwo>")
        }
   ....
|improve this answer|||||
  • Thanks for the reply, where should i put this? inside the webpack config file? – Islam Shaheen Mar 16 '17 at 7:01
0

If you want to use webpack only,then just set the libraryTarget to 'umd' in bundletwo webpack configuration.

In order to be able to import this module, you need to export your bundle.

 output: {
        libraryTarget: 'umd',// make the bundle export
        filename: "index.js",
        path: path.resolve(__dirname, "dist"),
    }

However, this can also be achieved by just using Babel to transpile your ES6 code to ES5 code.

babel index2.js --out-file dist/index2.js

Now set the main in package.json to "dist/index2.js"

Now you can use it like

import {SomeCompoent} from "bundleTwo";

You can also create a gulp script for that

gulp.task('js', function () {
    return gulp.src(['packages/**/*.js', "!**/*.test.js"])
        .pipe(babel({
            plugins: ['transform-runtime']
        }))
        .pipe(gulp.dest('dist'));
});
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.