Webpack

Webpack is the default build tool supplied with Laravel 5.5 and we'll be making use of it in the development of Vuebnb.

What makes Webpack different to other popular build tools, such as Gulp and Grunt, is that it's first and foremost a module bundler. Let's begin our overview of Webpack by getting an understanding of how the module bundling process works.

Dependencies

In a frontend application, we are likely to have dependencies for third-party JavaScript libraries or even other files in our own code base. For example, the Vuebnb prototype is dependent on Vue.js and the mock-listing data file:

Figure 5.3. Vuebnb prototype dependencies

There's no real way of managing these dependencies in a browser, other than to ensure any shared functions and variables have global scope and that scripts are loaded in the right order.

For example, since node_modules/vue/dist/vue.js defines a global Vue object and is loaded first, we're able to use the Vue object in our app.js script. If either of those...