webpack七探-库打包

时间：2020-02-20 17:23:32 阅读：53 评论：0 收藏：0 [点我收藏+]

当我们编写了一个库(library.js)，需要进行打包给别人使用，那么别人可能使用的方式有：

import library from ‘library‘;
const library=require(‘library);
require([‘library‘], function(){});

所以我们打包生成的代码要让用户在commonJS的环境还是AMD的环境都可以使用，那么我们需要在output中进行配置：

output:{
    path:path.resolve(__dirname,‘dist‘),
    filename:‘library.js‘,
    libraryTarget:‘umd‘     // 这是通用的意思，不管以什么形式都可以正确引入
}

如果还想用script标签的形式引入并使用：

<script src=‘library.js‘></script>

用法： library.func

那么我们还需要配置：

output:{
    path:path.resolve(__dirname,‘dist‘),
    filename:‘library.js‘,
    library:‘library‘,      // 后面的library是指全局变量名称
    libraryTarget:‘umd‘
}

当我们修改配置：

output:{
    path:path.resolve(__dirname,‘dist‘),
    filename:‘library.js‘,
    library:‘library‘,      // 后面的library是指全局变量名称
    libraryTarget:‘this‘    // 或者‘window‘，如果是node环境，需要改成‘global‘，一般情况下都会填个umd
}

这个时候就不支持commonJS和AMD的引入形式，只能从window或者this中获取，可以在控制台输出测试。

还有一种情况：当我们编写的库中引入了一个库（如lodash），而我们的项目中也使用了该库，那么就会造成打包两次lodash，那么我们就需要将其忽略：

externals:[‘lodash‘],

意思是碰到lodash这个库的时候不将其打包。除了数组形式，我们还可以使用对象的形式进行配置：

externals:{
    commonjs:‘lodash‘
}

意思是当我们使用commonJS的形式使用lodash库时，必须使用lodash这个名字，而不能使用其他名字：

const lodash=require(‘lodash‘);     // 正确
const _=require(‘lodash‘);          // 错误

还可以配置成：

externals:{
    root:‘_‘
}

意思是当我们以script标签引入时，必须全局注入‘_‘，下面的 const lodash=require(‘lodash‘); 才能正确引入。一般在没有特殊要求的情况下，我们只需要配置成：

externals:{
    lodash:‘lodash‘
}

我们实际想要做成库的文件是dist目录下的library.js，所以需要在package.json中修改："main": "./dist/library.js", 然后去npm网站上注册一个账号，使用命令行：

npm adduser xxx xxx
npm publish xxx

步骤自行百度

webpack七探-库打包

原文：https://www.cnblogs.com/jingouli/p/12335837.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)