vue组件注册为什么有时候要在require后面加上default?
手边有两个项目，都是通过vue-cli生成的项目。
其中一个项目可以直接用这样的代码注册组件：
```
Vue.component('HeaderBar',require("./components/common/HeaderBar.vue"));
```
可是另外一个项目却需要这样注册组件：
```
Vue.component('HeaderBar',require("./components/common/HeaderBar.vue").default);
```
否则的话就会报错说：
```
Failed to mount component: template or render function not defined
```
请问这是怎么一回事呢？
webpack 打包时支持 CommonJS、AMD 和 ES6 的模块化系统。

我们通常写 .vue 单文件组件时，在 script 语言块中使用的是 ES6 的语法，使用 export default 进行默认导出。

require 是 CommonJS（和 AMD，想不到吧？）的模块导入方式，不支持模块的默认导出，因此导入的结果其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件选项。或者使用 ES6 的 import 语句，ES6 的模块化导入导出语法参见 http://es6-features.org/#Valu...，import 时需要给定一个变量名，所有 import 语句必须统一放在模块的开头。

如果 .vue 文件中使用的本来就是 CommonJS 或者 AMD 的模块化系统语法，导出的是 module.exports 对象作为组件选项，那么使用 require 导入时就不需要使用 .default 来获取。

以上就是这个问题出现的原因，下面我说说用`webpack`打包`esm`成可直接引入的配置吧。
之前打包`export default`导出的包都会成为
```
{
  default: {
    // 内容
  }
}
```
webpack3多了一个配置
```
libraryExport: 'default'
```
会将`default`中内容打包
```
{
  \\ 内容
}
```