My plan is to create two separate files, vendor.js and app.js, for my project. In this setup, vendor.js will contain the core code for Webpack and Vue.js, while app.js will solely focus on the Vue.js code specific to my application. To streamline this process, I am utilizing the npm module laravel-mix to manage the asset bundling using Webpack.
The content of vendor.js is as follows:
window.Vue = require('vue');
On the other hand, app.js includes the following code snippet:
import App from './App.vue';
Vue.component('App', App);
new Vue({
el: 'App'
});
The configuration in webpack.mix.js looks like this:
let mix = require('laravel-mix');
mix.js('src/js/vendor.js', 'public/js/')
.js('src/js/app.js', 'public/js/')
.sass('src/sass/vendor.scss', 'public/css/')
.sass('src/sass/app.scss', 'public/css/');
Despite setting up the files accordingly, it seems that app.js continues to duplicate some of the core code present in vendor.js. As I load vendor.js before app.js, the redundant inclusion of Webpack core code in both files becomes unnecessary.
I am seeking guidance on how to structure vendor.js and app.js to achieve a clean separation of concerns. The current implementation in vendor.js feels somewhat messy since I'm resorting to the require function rather than the ES6 standard import, and attaching Vue to the window object for access in app.js.
An ideal scenario would involve the following structures:
vendor.js:
import Vue from 'vue';
app.js:
import Vue from 'vue';
import App from './App.vue';
Vue.component('App', App);
new Vue({
el: 'App'
});
This approach appears cleaner and aligns better with modern ES6 practices, yet it compromises the purpose of vendor.js by duplicating the Vue import within app.js. My expectation was that Webpack would intelligently handle the duplication issue and only include the core code once. Why does it redundantly add the Webpack core code to both files?
Although I understand the technical rationale behind this behavior, I hope for a smarter implementation where the core code is imported only once. Is there a way to achieve this level of optimization?