@H_502_0@之前一篇文章分析了<a target="_blank" href="//www.jb51.cc/article/136186.htm">Webpack打包JS模块的基本原理，所介绍的案例是最常见的一种情况，即多个JS模块和一个入口模块，打包成一个bundle文件，可以直接被浏览器或者其它JavaScript引擎执行，相当于直接编译生成一个完整的可执行的文件。不过还有一种很常见的情况，就是我们要构建发布一个JavaScript的库，比如你在npm社区发布自己的库，这时Webpack就需要相应的配置，编译生成的代码也会略有不同。
和之前一篇文章一样，本文主要分析的是Webpack的生成代码，并结合它来说明编译库时Webpack那些关于library的配置选项的具体作用，相应的官方文档在这里。
@H_502_0@编写JS的库
@H_502_0@我们还是从简单的案例开始，我们随便编写一个简单的库util.js：function sayHello() {
console.log("Hello");
}
@H_502_0@提供了两个函数，当然它们之间毫无关系，也实际上没有任何卵用，纯粹是仅供教学参考。。。
@H_502_0@接下来写Webpack的配置：
@H_502_0@但仅仅这样是不够的，这样输出的文件就是一个立即执行的函数，最后会返回util.js的exports，参照上一篇文章中分析，最后生成的bundle代码结构大致是这样的：
console.log("Hello");
}
function hideImages() {
$('img').hide();
}
export default {
sayHello: sayHello,hideImages: hideImages
}
function webpack_require(moduleId) {
// ...
}
@H_502_0@它如果执行完，那就结束了，将util.js的export部分返回而已，而我们需要的是将这个返回值交给编译后的文件的module.export，这样编译后的文件就成了一个可以被别人import的库。所以我们希望得到的编译文件应该是这样的：
// ...
}
return webpack_require('./util.js');
}) ({
'./util.js': generated_util,'/path/to/jquery.js': generated_jquery
});
文件
output: {
path: './dist',filename: '[name].dist.js',library: 'util',libraryTarget: commonjs2
}
@H_502_0@这里最重要的就是libraryTarget，我们现在采用commonjs2的格式，就会得到上面的编译结果，也就是说Webpack会library把最后的输出以CommonJS的形式export出来，这样就实现了一个库的发布。
@H_502_0@其它发布格式
@H_502_0@除了commonjs2，libraryTarget还有其它选项：
全局变量)
commonjs
commonjs2
amd
umd
@H_502_0@使用不同的选项，编译出来的文件就能够在不同JavaScript执行环境中使用。在这里我们直接看万金油umd格式的输出是怎么样的：
