什么是Library
最初接触webpack时,总是不明白entry入口使用的Javascript和打包后的Library有什么区别?后来才明白,两者并无区别,任何的js模块都可以打包成一个library。
如何打包一个Library
最简单的方式,是在webpack.config.js中添加output的配置,如下:
output:{
...
library: 'myUtil',
libraryTarget: 'umd'
}
library & libraryTarget
那么这两个参数有什么意思呢?较详细的说明,见官方文档.此处只讲常用的配置。
libraryTarget: 想创建一个library,output中的libraryTarget是必须不可少的。其代表,你将生成的library遵守的哪种规范,如commonJS,AMD,commonJS2。我不有关心这些乱七八糟的规范,我想弄个通用的,那么就设置为umd即可。
-
library:假设你的library已生成完毕,且命名为main.js后(如下main.js是我自定义的library)!
该变量值在使用import 或 require引入你的library时没有用。引入后的变量名可随意设置。如:import * as myUtilx from './main'
或
var myUtilx = require('./main');
它只有在html中,通过script标签引入library时才有用,如:
<script src="main.js"></script>
此时获取你的library引用的以下三种方法均要使用此变量值(官方用词为"暴露你的library")
console.log(myUtil);
console.log(this['myUtil']);
console.log(window["myUtil"]);
此处的myUtil即是你配置在webpack.config.js中设置的library值。