Organize + Automate + Deploy = Webpack Chapter 16How it works...
When working in a component or when programming in general, it's much better to reduce
the scope of the code to only one layer of abstraction. When we write a computed function
that returns the final capital value, we should only worry about calling the right function--
the one that does the right calculation for our purpose. The internals of the formula are on a
lower layer of abstraction and we don't want to deal with that.
What we have done is that we brought all the nitty gritty of the calculations in a separate
file. We then exported the function from the file with the following line:
export default function (Principal, yearlyRate, years) {This makes the function available by default when we import the file from our Vue
component:
import compoundInterest from './compoundInterest'So, now compoundInterest is the function we defined in the other file. Furthermore, this
separation of concerns allow us to use this function to compute compound interest
everywhere in our code, even in other files (potentially other projects too).
Bundling your component with Webpack
Webpack lets you package your project in minified JavaScript files. You can then distribute
these files or use them yourself. When you use the inbuilt templates that come with vue-
cli, Webpack is configured to build an entire working application with it. Sometimes we
want to build a library to publish or use in another project. In this recipe, you will tweak
the default configuration of the Webpack template to release a component instead.
Getting ready
This recipe will make sense to you only after you have installed npm and got familiar with
vue-cli and the Webpack template.