webpack七探-库打包

当我们编写了一个库(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

步骤自行百度