Organize + Automate + Deploy = Webpack Chapter 16We can launch the Webpack dev server directly, but I highly suggest adding the following
code to the package.json file:
"scripts": {
"dev": "webpack-dev-server --entry ./src/index.js --inline --hot --open"
}Now, if we launch npm run dev, a browser should open with the component incorrectly
displaying the following:
Hello Jane!
You should also be able to see the problem in the console:
11:7 error Duplicate key 'name' no-dupe-keys
This means that we have two keys with the same name. Correct the error by removing the
property:
data () {
return {
name: 'John'
}
}In the console, after you save the Vue component, you should note that Webpack already
performed the compilation again, this time with no errors.
How it works...
Basically, what happens here is that the linter loader processes the files before other
compilation steps and writes the errors in the console. This way, you will be able to see
imperfections in your code while you develop continuously.
ESLint and Webpack are available in the Vue official template. You now know that if for
some reason, you want to modify the ESLint rules, you can do it from the .eslintrc.js
file and that if you want to use another linter altogether, you can use another loader in the
Webpack configuration file.