webpack打包公共库

先来看下业界成熟库的打包方案：

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

目录结构

然后学习成熟库的打包库实现自己的打包方案，目标是明确的，方案有很多种，可以写多个webpack配置文件来实现，我这里偷个懒使用一个配置文件；

const path = require("path");
const terserplugin = require("terser-webpack-plugin");
module.exports = {
  entry: {
    "add-number": "./src/index.js",
    "add-number.min": "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "./umd"),
    filename: "[name].js",
    //   指定库的名称
    library: "ken",
    //   指定打包规范
    libraryTarget: "umd", // var this window global umd
    libraryExport: "default",
  },
  mode: "none",

  optimization: {
    minimize: true,
    //   plugins
    minimizer: [
      new terserplugin({
        test: /\.min\.js$/,
      }),
    ],
  },
};

考虑到uglifyjs-webpack-plugin对es2015支持性不好，所以这里不推荐使用; terser-webpack-plugin也是从uglifyjs-webpack-plugin新开辟的分支

我们这里选择umd的方式来打包，这样会支持以src方式引入，也支持import和require方式引入；

// umd方式打包多出的代码

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["kkb"] = factory();
	else
		root["kkb"] = factory();
})(window, function() {

这里需要注意问题libraryExport："default"一定要加入，否则导出的就是一个模块，使用起来不是很方便；

const add = require('ken-lib-0211')

// 不加libraryExport："default"
add.default(10, 10)

// 加libraryExport："default"
add(10, 10)

参考react.js的打包模式，所以在根目录下增加一下代码这部分是需要自己手动增加的

// index.js

if (process.env.NODE_ENV == "production") {
  module.exports = require("./umd/add-number.min.js");
} else {
  module.exports = require("./umd/add-number.js");
}

{
  "name": "ken-lib-0211",
  "version": "1.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "terser-webpack-plugin": "^4.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

最后的目录结构