如何在webpack中使用external模块-创新互联
本篇文章给大家分享的是有关如何在webpack中使用external模块，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
external选项
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'
}这样打包出来的util.dist.js文件会把jquery的代码完整地注入进去，因为你的源代码使用到了它。但是这往往并不是我们希望的，因为jquery是很通用的模块，在一个app中，很可能其它的库也会用到它，最顶层的入口文件app也可能用到它，如果每一个库模块的发布版本都将jquery原封不动地打包进了自己的bundle，最后拼到一起，在最终的app发布代码里就会有很多份jquery的复制，当然这可能并不会影响它的正常功能，但是会占据很大的代码体积。
所以通常情况下当你的库需要依赖到例如jquery，bootstrap这样的通用JS模块时，我们可以不将它打包进bundle，而是在Webpack的配置中声明external：
externals: {
jquery: {
root: 'jquery',
commonjs: 'jquery',
commonjs2: 'jquery',
amd: 'jquery',
},
},这就是在告诉Webpack：请不要将这个模块注入编译后的JS文件里，对于我源代码里出现的任何import/require这个模块的语句，请将它保留。
我们可以看一下编译后的bundle文件的结构：
module.exports = (function(modules) {
var installedModules = {};
function webpack_require(moduleId) {
// ...
}
return webpack_require('./util.js');
}) ({
'./util.js': generated_util,
// '/path/to/jquery.js': generated_jquery 原本有这一行，现在被删去。
});可以看到jquery模块没有被打包进bundle文件，而对于util，它的生成代码即generated_util函数中关于import jquery相关的语句也被保留了原意：
function generated_util(module, exports, webpack_require) {
var $ = require('jquery');
// util的其它源代码
// ...
}当然也并非完全没有修改，例如将import的改回了传统的require关键词，因为我们这里用的是CommonJS风格的打包方式。不过这些都是次要的，关键是它保留了require这个关键词，而没有使用webpack_require将jquery真的引入进来。这就是说，当前的这个JS文件的模块管理系统中是没有jquery的，它是一个external的模块，需要在这个JS文件被其它人引用并且在上层编译时，jquery才可能被真的引入进来，到那个时候这里的require关键词才会被替换为webpack_require。
对于external的依赖模块，通常你可以这样做，例如你使用npm发布你的库，你可以将jquery在package.json文件中添加到dependencies，这样别人npm install你发布的库时，jquery也会被自动下载到node_modules供别人打包使用。
umd格式下的打包
如果我们使用umd格式打包，我们可以看到在不同环境中，external模块是如何发挥作用的：
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object') // commonjs2
module.exports = factory(require('jquery'));
else if(typeof define === 'function' && define.amd)
define("util", ['jquery'], factory); // amd
else if(typeof exports === 'object')
exports["util"] = factory(require('jquery')); // commonjs
else
root["util"] = factory(root['jquery']); // var
}) (window, function(__webpack_external_module_jquery__) {
return (function(modules) {
var installedModules = {};
function webpack_require(moduleId) {
// ...
}
return webpack_require('./util.js');
}) ({
'./util.js': generated_util,
});
}而generated_util也相应地增加一个参数__webpack_external_module_jquery__：
function generated_util(module, exports, webpack_require,
__webpack_external_module_jquery__) {
var $ = __webpack_external_module_jquery__;
// util的其它源代码
// ...
}这样的写法似乎结构和上面的CommonJS的编译版本不太一样，但实际上本质是一样的。因为现在umd要照顾到不同的运行环境，所以它把require('jquery')提前了，作为factory的参数传入。对于每种运行环境，各有各的做法：
CommonJS：保留require('jquery')语句。
AMD：在define中将jquery定义为依赖模块。
Var：从全局域中取出jquery变量，这需要jquery在该模块之前就已经被加载。
然后不管是哪种情况，它们都将载入后的jquery模块作为参数传入factory函数，这样就能正确加载util模块了。
以上就是如何在webpack中使用external模块，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章标题：如何在webpack中使用external模块-创新互联
分享链接：http://6mz.cn/article/cosejo.html