外部扩展 和 预置依赖

External 外部扩展

external 翻译过来为外环境/外控制，可以理解为webpack忽略那些文件打包，并交给外部处理。

当你需要在html模板文件直接引入一个JS文件的时候，但是你有希望在src源码文件可以通过import的方式引入改文件的内容，比如：jquery

假设

// 模板html中
<script src="jquery-cdn-src"></script>

// 在入口文件中
import jQuery from 'jquery'

我们需要配置 webpack：

const externals = {
  // key 为 被设置为模块的名称，value 为 全局变量
  jquery: 'jQuery'
}

本质的原理就是：

// 在打包后的文件：
WEBPACK_MODULES = {
  'jquery': function(....) {
    ....
    export default jQuery // window.jQuery
  }
}

需要注意的是，如果你这样做，那必须确保 导入的外部文件向全局对象window上挂载了对应的变量，比如window.jQuery。

CDN引入，设置成模块

当你需要CDN引入的时候确实可以像上面一样，但是有的不合理，因为模板html和webpack配置都需要更改。我们需要更新设置 externals 以支持：

const externals = {
  // key 为 被设置为模块的名称，value 为 全局变量
  jquery: [
    'CDN URL', // 能够自动的帮你插入一个src为CDN的script标签
    'jQuery' // 当如其实这里也可以是$，因为jquery也向外暴露了jQuery
  ]
}

shimming 预置全局变量

如果有常用的包，很多文件都需要导入进来，你可以都不想写了，可以尝试设置成全局变量

shimming 依赖 webpack.ProvidePlugin，是webpack内置的插件：ProvidePlugin

const { ProvidePlugin } = require('webpack')
const { resolve } = require('path')
// webpack.config.js 
ley plugins = [
  ...plugins,
  new ProvidePlugin({
    _: 'lodash',
    // 支持jquery
    $: 'jquery',
    jQuery: 'jquery',
    // 也可以使用自定义文件
    ['utils.add']: [resolve(__dirname, 'utils', 'math.js'), 'add']
  })
]

// 在源代码可以直接的使用 _ 
console.log(_.join('webpack', 'shimming'))

当如，如果不需要导入整个 lodash，只是希望将lodash某个模块作为全局变量可以这么做：

ley providePlugins = {
  ...providePlugins,
  _map: ['lodash', 'map'],
}

只需要在webpack.config.js配置对应的全局对象，在源代码就可以直接使用。每当在源代码中遇到该标识符作为自由变量时，模块就会被自动加载，标识符也会被加载模块的导出(或属性，以支持命名导出)填充

总结

• External：突出那些资源不需要webpack单独的打包，只是负责模块化导出全局变量
• Shimming：为模块提供全局使用的简便方式