自定义Library

什么是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时才有用,如:

      
    

此时获取你的library引用的以下三种方法均要使用此变量值(官方用词为"暴露你的library")

        console.log(myUtil);
        console.log(this['myUtil']);
        console.log(window["myUtil"]);

此处的myUtil即是你配置在webpack.config.js中设置的library值。

你可能感兴趣的:(自定义Library)