Sharing a webpack bundle

[jasonmcaffee]

Hello, I'm trying to find a way to share a webpack bundle with another project.
In my webpack bundle I have moduleA and moduleB, and I would like to reference those modules inside of another webpack project.
e.g.
Project 1:
-> module A
-> module B
Project 2:
-> module C require('Project 1/module A', 'Project 1/module B')

I've done some searching and can't seem to find an example of this. (I've seen examples using the CommonChunksPlugin, but that only seems to work if both projects are built in the same process, and that is not the desired behavior)

Thanks

[sokra]

You can do this with a combination of output.library and externals, but there is no buildin way to do this.

[jasonmcaffee]

would output.library allow me to expose moduleA and moduleB of project 1 to reference as externals of project 2? I'm looking at http://webpack.github.io/docs/library-and-externals.html but I'm not seeing exactly how this can be accomplished. thanks!

[jhnns]

Bundle Project 1 with output.library = 'project-1'.

Then configure Project 2 like externals: ['project-1'] and then you can write require("project-1") afaik...

[jasonmcaffee]

sorry, but that is not what i'm looking for. I'll explain further.
Project 1 has 2 modules defined:
define('project1/moduleA', [], function(){
return {a: true};
});

define('project1/moduleB', [], function(){
return {b:true};
});

I want webpack to bundle those 2 modules, and then share the bundle with another project.
import project1.bundle.js

define('project2/moduleC', ['project1/moduleA', 'project1/moduleB'], function(moduleA, moduleB){
console.log(moduleA.a);// 'true'
return {c:true};
});

it seems like with the external, each module in project1 would need to be a separate bundle, and that is not desired.

[jhnns]

Is it necessary to bundle project1 with webpack before using it within project2? The webpack way would be to just install project1 via npm and then require it.

Your approach is somewhat contradictory. You want to export project1 as a single value (using the library option) and then require the single modules of project1. Usually you'd use the library-option if you want to export the bundle to old-school JavaScript without using a module system.

[jasonmcaffee]

I don't want to use the library option, that is what was suggested to get it to work,and I stated why it didn't make sense to use. Using npm would require us to set up a private npm server. I was able to get this to work with browserify, which allows you to customize module ids with the label pipeline. You guys should consider doing something similar.

[jhnns]

You don't need a private npm server. You can specify any git tag/branch/commit:

{
    "my-module": "git://example.com/any/repo.git#v2.1.0"
}

while v2.1.0 is a git tag.

Pre-bundling dependencies is discouraged because it makes it harder to optimize in the end (e.g. deduping modules).

[coderitual]

Jason, I understand your need because I have the same problem. It would be nice to treat webpack bundle like it was external library in other languages (eg. dll). I have many webpack projects and sometimes want to use some bundled ones like i have sources in my current dir.

I think we need something like external bundle option (and then we could add these bundles to html scripts or select to bundle it in our current project).

[snowmantw]

So...does this means we need to put libraries as source directories, rather than packed files to be included? For example, if I have a library in ES6 module format:

lib/foo.js:
export function Foo() { /*...*/ }

And I want to use this lib in app. From the answers above, I couldn't import such module as:

app/main.js
import { Foo } from 'path/to/lib-packed.js/foo.js'

(note another issue is /foo.js would be a path within the packed file rather than indicating to a real path like path/to/lib-packed.js)
Rather that, I need to copy the whole directory of lib and import it as:

app/main.js
import { Foo } from 'path/to/lib-directory/foo.js'

And then to webpack whole app as the final package, instead of have packaged libraries within a packed app, unless I use them as AMD/CommonJS/Whatever "old school" loader:

app/main.js
require('Foo', 'path/to/lib-packed-as-library')

And maybe add some r.js tricks, right?

[coderitual]

Right.

[sokra]

It would be nice to treat webpack bundle like it was external library in other languages (eg. dll).

@coderitual There is a DllPlugin which creates a bundle which behaves like a dynamic linked library. Another bundle can import it with the DllReferencePlugin. All used "dll"s need to be added as <script> tag. See dll and dll-user examples.

This has negative impact on loading performance (more requests) and positive impact on caching (app can change independend from dll).

The normal user don't want this. You want a single bundle.

[coderitual]

@sokra Thanks! Now I'm mostly using full sources of other local packages (symlinks in node_modules) but I'll check this plugin.

[bebraw]

@jasonmcaffee Safe to close?

[moo3]

There is a DllPlugin which creates a bundle which behaves like a dynamic linked library.

I have a similar scenario but the bundle is created by non-webpack bundlers (r.js). Does that mean webpack cannot read r.js built bundles and when there are multiple define blocks in a file they will not exposed to be required from other files?