Organize + Automate + Deploy = Webpack Chapter 16Transform the arrow functions into simpler JavaScript as follows:
var addOne = function addOne(n) {
return n + 1
}To select the files and their respective loaders, we filled the test field
inside webpack.config.js and to match the .vue files, we wrote the following:
test: /\.vue$/This syntax is a regular expression and it always starts with a forward slash and ends with
another forward slash. The first character it matches is the point, which is expressed as .
because the. character is already taken for other purposes. The point has to be followed
by the vue string and the end of string character is expressed as a dollar sign. If you put
them all together, it will match all the strings that end with .vue. A similar thing is
followed for the .js files.
Running a code linter while developing
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.
Getting ready
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.
How to do it...
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>