如何分离webpack中引入的第三方插件，采用cdn加载

Question

这里jquery和angular可以分离
但是ol插件只能分离{map} form 'ol' 这种，像 {xx} from 'ol/style'则依旧打包

Answer 1

因为 from 'ol' 和 from 'ol/style' 在 webpack 看来是两个东西。不过好在 externals 支持函数，我们可以这样做：

module.exports = {
  externals: [
    // 引入包的默认 entry
    {
      'jquery': 'jQuery', 
    },
    // 引入包里的特定部分
    function (context, request, callback) {
      // 所有 ol 包里的内容
      if (/^ol\//.test(request)){
        return callback(null, request);
      }
      callback();
    },
  ],
}

这个方法在开发库项目的时候比较常见。比如一个库要引用很多 lodash 方法，我们又希望这个库 build 时尽可能小，就可以把 lodash 放到外部。具体可以参考我的博客。

另外建议阅读 webpack externals 文档。