In this chapter, we will talk about the following topics:
Webpack coupled with npm is a very powerful tool. In essence, it's just a bundler that takes some files along with their dependencies and bundles everything into one or more consumable files. It's now in its second version and represents much more than before, especially for Vue developers.
Webpack will enable you to write components conveniently isolated in single files and shippable on command. It will enable you to use different JavaScript standards, such as ES6, but also other languages altogether, all thanks to loaders, a concept that will recur in the following recipes.
Vue components can become very complex sometimes. In these cases, it's better to split them up and try to hide some complexity with abstraction. The best place to put such complexity is external JavaScript files. This way you have the added benefit that, if necessary, it's easier to share the extracted logic with additional components.
This recipe is of intermediate level. Before coming here, you should have completed the Choosing a development environment recipe in Chapter 1, Getting Started with Vue.js, and should know how to set up a project with npm.
Also, ensure that you have the vue-cli package installed globally with the following command:
npm install -g vue-cliWebpack 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.
This recipe will make sense to you only after you have installed npm (refer to the Choosing a development environment recipe in Chapter 1, Getting Started with Vue.js) and got familiar with vue-cli and the Webpack template.
Webpack is a tool for organizing your code and dependencies. Furthermore, it gives you a way to develop and build with JavaScript files that embed all the dependencies and modules that we pass to them. We'll use this in this recipe to build a small Vue application and bundle everything in a single file.
This recipe doesn't require any particular skill except the use of npm and some knowledge of the command line. You can find out more in the Organizing your dependencies with Webpack recipe in this chapter.
Create a new folder for your recipe and create a package.json file with the following content inside it:
{
"name": "recipe",
"version": "1.0.0"
}This defines an npm project in our folder. You can, of course, use npm init or yarn init if you know what you're doing.
We will install Webpack 2 for this recipe. To add it to your project dependencies, run the following command:
npm install --save-dev webpack@2The --save-dev option...
Using external Vue components in your own project is usually straightforward. Sometimes though, things aren't so simple. In particular, there are some configurations in the official templates with Webpack that (weirdly) actually prevent you from using some external components. In this recipe, we will install a modal dialog component from the Bulma project.
In this recipe, we will tweak the Webpack configuration. It is suggested to have completed the Organizing your dependencies with Webpack recipe before taking up this task.
We will start with a fresh Webpack project. You can create a new one using the vue-cli and the official Webpack template. My suggestion, however, is to begin with my Webpack template, which is a clean slate. To do it, run the following command in a new directory:
vue init gurghet/webpackWe will install vue-bulma-modal, which is a component written in Vue with the Bulma CSS framework:
npm install...Hot reloading is a really useful technology that lets you develop while looking at the results in the browser, without even refreshing the page. It's a very tight loop and can really speed up your development process. In the official Webpack template, hot reloading is installed by default. In this recipe, you will learn how to install it yourself.
Before attempting this recipe, you should have at least a vague idea of how Webpack works; the Organizing your dependencies with Webpack recipe in this chapter will have you covered.
Create a new npm project in a new directory, either with npm init -y or yarn init -y. I personally prefer the second one because the resulting package.json is much more compact.
ES6 has a lot of useful features, and in this recipe you will learn how you can use it in your projects. It's worth noting that ES6 currently has very good browser support. You won't have compatibility issues with 80% of the browsers in the wild, but you may need to even reach people who're still using Internet Explorer 11, depending on your audience, or you may just want to maximize your audience. Moreover, some tools for development and Node.js still don't fully support ES6, deeming Babel necessary even for development.
In this recipe, we will use npm and the command line. If you completed the Choosing a development environment recipe in Chapter 1, Getting Started with Vue.js, you are probably good to go.
Linting your code drastically reduces small bugs and inefficiencies that accumulate during development, it guarantees that the coding style is consistent across a team or organization, and it makes your code more readable. Instead of running the linter once in a while, it's useful to have it constantly running. This recipe teaches you how to do it with Webpack.
In this recipe, we will play with Webpack once again. You will build a tight loop with webpack-dev-server, which is covered in the Developing with continuous feedback with hot reloading recipe.
In a new folder, create a new npm project (you can use npm init -y or yarn init -y).
Inside the folder, create a new directory named src and put a file inside it, called MyComp.vue. Let the file contain the following code:
<template>
<div>
Hello {{name}}!
</div>
</template>
<script>
export default {
data () {
return {
name: 'John...While working on the release of your components, you may need a reliable process to issue your built files. A common operation is to release two versions of a library/component: one for development purposes and one to be consumed in production code, usually minified. In this recipe, you will tweak the official template to release both a minified and a development JavaScript file at the same time.
This recipe makes sense if you are already building and distributing your own components. If you want to learn more, I suggest you refer to the Bundling your component with Webpack recipe.
We'll start with a project with the official Webpack template. You can use your own, or you can spin up a new project with vue init webpack and install the dependencies with npm isntall.
Go inside the build directory. When you launch the npm run build command, you are effectively launching the build.js file in this...
At a certain point, there comes a moment when you want to give back to the community. Maybe you built a "fart button" or maybe you built an automates stock options trader; whatever it is that you've built, the JavaScript and Vue community will be happy to welcome you. There is a big chunk of things to be done on the side of marketing and licensing, but in this recipe you will concentrate on the more technical aspects.
This recipe is directed at those who want to share their work in Vue with the rest of the community. In the Bundling your component with Webpack recipe, you will find how to tweak the official Webpack template to bundle your component correctly; this recipe can be thought of as a second part. We will not use the official template though.
© 2017 Packt Publishing Limited All Rights Reserved
