webpack之externals解析

1.是什么

• 指定排除掉不想被webpack打包的模块。
• 被排除掉的模块，是要在运行时依赖用户环境去获取的。所以，用户的环境必须有被排除掉的包。

2.既然模块不被打包，那么项目中的引入语句如何处理呢？

webpack会根据你对模块的配置，将引入语句，编译生成对应环境下引入语句。

3.如何使用

具体参见官方文档，下面说下要点。

• 如果库的打包为UMD格式的，即：libraryTarget: 'umd'，那么需要配置一个对象。如：

 externals: {
    lodash: {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_', // 排除的模块，作为全局变量使用，通过script tag引入。默认设置
    },
  }

为什么这样配置呢？

因为umd格式，是webpack打包后，在任何环境下都能正常使用的。所以，你既然不想其被打包，又想在任何环境下使用，就必须这样配置了！！

• 有一点需要注意，就是root这个property对应的value值，必须是该库提供的全局变量，不是自定义的。

4.应用场景

• 减小项目打包体积，加快打包速度。
• 还有一个比较重要的应用场景：对于打包后可能需要变动的东西，则单独放置于一个文件中，然后利用该配置，通过script标签在HTML文件中引入。那么，即使打包了，也是可以去直接修改打包后的文件的。（比如：生产环境地址和开发地址的临时切换）。但是这个目前比较好的方法，是通过脚本去执行不同的命令，设置不同的环境变量，进而得到地址来做的。

5.与libraryTagret的关系

• libraryTarget决定你的项目以哪种模块规范去运行的。本质上是哪种运行环境可以跑。
• externals决定了以哪种模块规范去加载引入的外部包体。