Vue.js and Webpack, how to build components for portability

Question

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...

Are you looking for something like this stackoverflow.com/questions/47754244/… ? — samayo
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

Bryan Wheeler Bryan Wheeler · Accepted Answer · 2017-12-16T00:46:05

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.

Vue.js and Webpack, how to build components for portability

1 Answers