阅读 1292

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

文章分类
前端
文章标签