How the node and webpack works in development of web?

I've developed web using jquery and bootstrap before. The last time I do so, I just wrote it in html like this

<link src="bootstrap.css" type="stylesheet"></link>
<script src="bootstrap.js"></script>
<script src="jquery.js"></script>

And now I'm attempting to established a website using vue. I know little about node and webpack. Following the instruction on the official site, I know type

npm init
npm install vue

in the terminal under the project path and I know it's a way of simplifying package managing but how I gonna to use the package I've installed? It errors "import declarations may only appear at top level of a module" when I type on the top of a js file.

import Vue from 'vue';

Can somebody just tell me how I need to do, what the difference of npm, webpack, bower, gulp and other tools using in web developing is and how to build the project. By the way, how should the directory be organized in a proper way?