webpack组织模块的原理 - external模块

最新推荐文章于 2024-07-05 17:12:56 发布

能不能不这么麻烦

最新推荐文章于 2024-07-05 17:12:56 发布

阅读量3.7k

点赞数 2

本文链接：https://blog.csdn.net/aide315/article/details/79507569

版权

本文深入探讨了Webpack中的external选项，用于避免在打包library时包含通用模块，如jQuery。通过配置Webpack，可以声明external模块，使其在上层应用中统一处理，减少重复代码，优化最终发布文件的大小。文中还分析了umd格式下external模块的处理方式，帮助读者理解Webpack模块打包机制。

摘要由CSDN通过智能技术生成

这篇文章讨论Webpack打包library时经常需要用到的一个选项external，它用于避免将一些很通用的模块打包进你发布的library里，而是选择把它们声明成external的模块，在你的library被上层使用后，在最后阶段由Webpack统一把这个external的依赖模块打包进来。

external选项一般都是用在打包library上面，如果不是library而是一个最终的app的发布JS文件，那external也没有什么意义。关于Webpack打包library的分析和一些选项的作用。

`external`选项

我们仍然使用前一篇文章的例子，定义一个库util.js：

import $ from 'jquery'

function hideImages() {
  $('img').hide();
}

export default {
  "hideImages": hideImages
}

我们使用Webpack打包发布这个库：

// 入口文件
entry: {
  util: './util.js',
}

// 输出文件
output: {
  path: './dist',
  filename: '[name].dist.js'

  library: 'util',
  libraryTarget: commonjs2,
  targetExport: 'default'
}