webpack 引入模块import 后面加入{}和不加大括号有什么区别

一、解释一

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export deault命令只能使用一次。所以，import命令后面才不用加大括号，相反其它的export 输出 可以有多个，且import时必须加大括号。

可以理解为：
通过import xxx from "…"引入的，xxx已经是默认导出项的别名了。
而通过import { xxx } from "…"引入的，{ xxx }只是导出项的名字，而并非导入时的名字。

二、解释二

1. import不使用花括号
   不使用{}来引用模块的情况下，import模块时的命名是随意的，即如下三种引用命名都是正确的；
   它总是会解析到A.js中默认的export default。

   // A.js
   export default 42

   export const A = 52

    // B.js                         B.js引用A.js
    import A from './A'
    import MyA from './A'
    import Something from './A'

2. import使用花括号{}
   下面代码生效的前提是，只有在模块A.js中有命名导出为A的export name的代码。

    // B.js
    import { A } from './A'                 // 正确，因为A.js中有命名为A的export
    import { myA } from './A'               // 错误！因为A.js中没有命名为myA的export
    import { Something } from './A'         // 错误！因为A.js中没有命名为Something的export