复习webpack4之Library打包

以前学习过webpack3的知识，可是webpack4升级后仍是有不少变更的，因此此次从新整理一下webpack4的知识点，方便之后复习。

此次学习webpack4不单单要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，好比打包原理等等，因此可能会省略一些比较基础的内容，可是但愿我能够经过这次学习掌握webpack，更好地应对之后的工做。

1.Library打包

咱们以前打包都是在项目中打包，若是咱们想开发一个库，要怎么打包呢？

如今咱们就模拟开发一个库，首先npm init -y，建立package.json，而后写两个js，里面写两个简单的函数，而后在index.js中引入这两个函数。

安装webpack和webpack-cli。

cnpm install --save webpack webpack-cli
复制代码

建立webpack.config.js，写入配置。

当别人使用咱们的库的时候，引入方式有多是CMD，AMD，ES6三种方式，因此咱们加一个配置项。

有时候，还有可能利用script标签引入js，这时候就须要再增长一个配置。

这样，webpack就帮咱们生成了一个全局变量library，就没有任何问题了。

2.library和libraryTaget

这两个属性能够配合使用，好比这种状况：

这个组合的意思是，生成一个全局变量，挂载到this上，这时候，就不能用MD，AMD，ES6三种方式引入库了。还能够写成window，global。

3.引入第三方库

若是咱们的库引入第三方库lodash，而用户使用咱们的库的时候，又引入了lodash，这样打包出来的代码就会包括两份lodash，因此咱们要增长一个配置来解决这个问题。

这样打包的时候，就不会把lodash打包到咱们的库中，可是在使用的过程当中，须要手动引入lodash。

externals除了数组，还能够写成对象。

这个意思是，若是使用咱们代码的环境是commonjs，lodash加载的时候，名字必须为lodash。

root: '_'的意思是，若是经过script标签方式引入，就必须在全局注册一个下划线变量

最后一种方式的意思是，不管用哪个方式引入，都命名为lodash。

其实真正写一个库的打包配置很麻烦，还包括了一些按需引用的功能，咱们只是作了一个初步的了解，等真正要打包库的时候，再做深刻了解。

若是咱们想让别人很方便引用咱们的库，还须要作一些配置，在package.json里面，把main入口配置成咱们打包生成的文件。

库写完了后，能够去npm官网申请帐号登陆后，在本地命令行中输入

npm adduser
复制代码

会让咱们输入帐号和密码，添加完以后，能够运行

npm publish
复制代码

这样就会把代码发到npm仓库中，别人使用的时候，npm安装就可使用了。