webpack Library的第三方库打包

我们之前开发的都是业务代码，如果我们需要开发一些库代码给小伙伴们用或者给自己的团队用。那么如何使用webpack打包呢？这小节将带大家写webpack对库进行打包。

新建项目

新建文件夹library，然后执行npm init 生成package.json文件，然后创建src文件，新建math.js和str.js，index.js

math.js代码：

export function add(a, b) {
    return a + b;
}
export function minus(a, b) {
    return a - b;
}

str.js代码：

export function join(a, b) {
    return a + ' ' + b;
}

index.js代码：

import * as math from './math';
import * as string from './str';

export {
    math, string
}

安装webpack

npm i webpack webpack-cli --save

配置webpack打包，新建webpack.config.js

const path = require('path');
module.exports = {
    mode: 'production',
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'library.js'
    }
}

package.json在scripts中写入：

"scripts": {
    "build": "webpack"
  },

当别人使用这个库的时候可能存在多种引入的方法，例如：

es6引入
import library from 'library'
commonjs引入
const library = require('library');
AMD引入
require(['library'], function () { 

})
<script src="xxx"></script>

我们需要配置webpack让以上的方式引入都可以

 output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'library.js',
        library: 'library',
        libraryTarget: 'umd'
    }

libraryTarget：'UMD'意思是不管通过es6还是通过AMD或者CommonJS的方式都可以引入这个库

library:'library' 支持通过script标签引入的方式，把打包生成的代码挂载到一个全局变量中library:'全局变量的名字'

如果我们写的库使用第三方的库

import _ from 'lodash';
export function join(a, b) {
    return _join([a, b], ' ');
}

现在我们引入了lodash模块，webpack会把lodash模块一起打包到library.js中，使用者并不知道我们已经打包了lodash，自己又引入了一边，那么就造成了lodash会被打包两次，解决办法在webapck.config.js中写入：

externals: ['lodash'],

externals意思是在webpack打包过程中遇到lodash这个库，就忽略这个库，不要打包到代码中去，使用这个库需要手动引入lodash库，并且注入的变量名字需要是lodash