复习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安装就可以使用了。

转载于:https://juejin.im/post/5cdc04c6f265da038364e95a