making entry in elixir webpack

hello everyone I'm new I watched on laracast the vue 2 step by step in the video webpack configuration from scratch the video

at time 15:20 jeff said that there is option in webpack that make me able to make two bundles one for permanent parts and another bundle for edited part but this is for webpack configuration

by editing entry and other steps

how can i make that in elixir ????

i'm using elixir webpack official and hope to cache the vue module and vue router module to reduce the updated part of app

MustafaAgamey

9 years ago

Level 1

that is my gulpfile.js

var elixir = require('laravel-elixir');


//this for webpack vue file imports
require('laravel-elixir-webpack-official');

// this is for vue file transforming
require('laravel-elixir-vue-2');

//this is for hot reload for the page after compiling (require to set hos @ artisan serve command)
require('laravel-elixir-browsersync-official');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.sass('app.scss');
    mix.webpack('main.js');
    mix.version('js/main.js');

    mix.browserSync({
        proxy:"127.0.0.1:8000"
    });
});

and that is my main.js


import VueRouter from 'vue-router';

import Vue from 'vue';

const Moment = require('moment');

import Axios from 'axios';

Vue.prototype.$http = Axios;


// installing vue router
Vue.use(VueRouter);


// intializing vue router
/// routes
import {routes}  from './routes';

/// router
let router = new VueRouter({
    routes,
    // mode:'history'
});
/// to run router just add it to the vue instance


import App from './App.vue';


new Vue({

    router,
    el: '#app',
    components: {
        App
    }
});

for caching problems I want to reduce the file main.js by splitting it into two parts

one contains modules like : (which will be cached) vue , vue-router , axios , moment

and the other files contain the app.vue contents , routes contents and the other components (and that file will not be cached)

So with this configurations how can I achieve that splitting ???