Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Organize + Automate + Deploy = Webpack Chapter 16

test: /.vue$/,
use: 'vue-loader'
}
]
}
}

To make everything work, we still need to install the dependencies we implied in our code.


We can install them with the following two commands:


npm install --save vue
npm install --save-dev vue-loader vue-template-compiler webpack webpack-
dev-server

The last one in particular--webpack-dev-server--is a development server that will help us


develop with hot reloading.


Run the following command to start the server:


./node_modules/webpack-dev-server/bin/webpack-dev-server.js --output-path /
--inline --hot --open

Actually, let's put this command in an npm script.


Open package.json and add the following lines:


"scripts": {
"dev": "webpack-dev-server --output-path / --inline --hot --open"
}

We can now run npm run dev and we'll get the same result--a browser will pop up--as


illustrated in the following screenshot:

Free download pdf