0

Let's say I've 2 Vue.js apps: app1 and app2.

Both implement the single file component approach and are built by webpack into the respective /dist/build.js .

Now I've the need to use in the app2 a component that was developed inside the app1, so I wonder: is there a way to instruct webpack to not build the entire app1 into a single /dist/build.js, but instead to produce N different "builded" js files to separate reusable components so that I can, for example, take the app1/dist/components.build.js and import in some way directly into app2 without phisically copy the .vue files in there?

I'm pretty new to Vue and Webpack, so I'm not even sure the question makes sense at all...

tanathos
  • 5,566
  • 4
  • 34
  • 46
  • Are you looking for something like this https://stackoverflow.com/questions/47754244/create-component-to-be-used-via-npm/47757050#47757050 ? – samayo Dec 16 '17 at 00:35
  • No, I don't need to create a npm package, I just need a js file that I can be able to share with other apps... – tanathos Dec 18 '17 at 16:31

1 Answers1

0

Webpack supports code splitting and is actually one of the cooler features it has to offer.

your webpack config would look something like this:

module.exports = {
    entry: {
        app1: 'path/to/app1/dir',
        app2: 'path/to/app2/dir/excluding/chunked/component',
        app3: 'path/to/app2/chunked/component',
    },
    plugins: [
        new HtmlWebpackPlugin({ title: 'Code Split' }),
        new webpack.optimize.CommonsChunkPlugin({
           name: 'common' // Specify name for your common app modules 
                          // i.e vendors, etc.
        })
    ],
    output: [
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    ]
}

Something like this should achieve your goals. It may need a little tweaking, but you should be able to isolate the component you want and extract it while keeping all common code bundled.

Bryan Wheeler
  • 125
  • 11
  • I'll give it a try tomorrow! – tanathos Dec 17 '17 at 18:01
  • it seems to be a partial solution: the JS part of the component is actually published, but at runtime is not able to find the template (I'm getting "Failed to mount component: template or render function not defined.", when I try to instantiate the component from another application. – tanathos Dec 18 '17 at 16:00