一个 webpack 加载 vue.js 的问题

webpack 和 vue 的初学者一枚。尝试在 webpack.config.js 中定义的入口文件中引入 vue.js 和 我自己的 main.js，vue 来源于 yarn。但在入口文件添加 import Vue from 'vue'; 命令后，写在 main.js 中的 vue 代码将不能正常解析，并在浏览器中报错 vue is not defined。如果将 import Vue from 'vue'; 写在 main.js 中，那么 main.js 中的 vue 代码就可以被正常解析了。

在我这几天的了解中，webpack 难道不是将所有的 js 代码都打包为一个 js 文件吗？为什么还会出现上述问题？希望各位能给我点播一下。

报错情况下的入口文件代码：

import Vue from 'vue';
require('./js/main');

main.js:

var app = new Vue({
  el: "#demo",
  data: {
    msg: "hello, world"
  }
});

正常运行情况下的入口文件代码：

// import Vue from 'vue';
require('./js/main');

main.js:

import Vue from 'vue';

var app = new Vue({
  el: "#demo",
  data: {
    msg: "hello, world"
  }
});