// webpack输出 define("MyLibrary", [], function() { return _entry_return_; // 此模块返回值,是入口 chunk 返回的值 }); // 使用 require(['MyLibrary'], function(MyLibrary) { // 使用 library 做一些事…… });
umd 将你的模块暴露为所有模块定义下都可运行的方式
(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define([], factory); else if(typeof exports === 'object') exports["MyLibrary"] = factory(); else root["MyLibrary"] = factory(); })(typeof self !== 'undefined' ? self : this, function() { return _entry_return_; // 此模块返回值,是入口 chunk 返回的值 });
jsonp 你的 library 的依赖将由 externals 配置定义。
MyLibrary(_entry_return_);
补充3.pathinfo到底是哪些玩意
补充4.plugins和loader什么区别?
我的理解是
loader使用来识别出特定文件,并转换文件内容,方便webpack使用,比如css文件要解析,需要将其转换成js代码放到js中,才能被后续处理(当然可以省略),然后加入最后输出的js当中
plugin是帮助webpack做一些额外的工作,补充一些webpack本身没有实现的功能,有种打补丁的意思,更专注于打包、编译、输出js文件等操作以及在某些阶段要额外做的一些操作,比如html插件将其链接地址插入html
补充5. 关于mainFields的解释
有一些第三方模块会针对不同的环境提供几份代码,例如分别提供了ES5和ES6两份代码,在package.json中代码如下:
{ "jsnext:main": "es/index.js", // 采用es6的入口文件 "main": "lib/index.js", // 采用es5语法的代码入口文件 }
那么webpack会根据mainFields数组里的顺序,逐步找到文件